The fixed panel on http://mondaybynoon.com/ disappears, when the window has a width<960. No JS is used for that. Can someone explain, how it is implemented?
He is use media query
for that responsive website.
You can define in HTML
like this:
<link rel='stylesheet' media='screen and (max-width: 900px)' href='css/medium.css' />
OR You can define in CSS
like this:
@media screen and (max-width: 900px){
body {
background: #ccc;
}
}
check these articles for more http://css-tricks.com/css-media-queries/ , http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
They use the @media
rule.
Snippet from their CSS:
@media (max-width:950px) {
#sidebar { display:none; }
#content { margin-left:20px; }
...
}
Documentation: http://www.w3.org/TR/css3-mediaqueries/#width
They use css to do this. They have rules that say when the browsers width is at this certain width implement this css.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.