User experience and Responsive design
Review
Standards, Semantic Correctness, and Accessibility (Learn HTML5) and
Planning and designing, Progressive enhancement (Web development).
At-rules
| @import | @media | @keyframes | @font-face | @charset|
At-rules are all different, but they have a basic structure in common. They start with an "@" symbol, followed by their name as a CSS keyword. Some at-rules are simple statements, with their name followed by more CSS values to specify their behavior, and finally ended by a semicolon. Others are blocks; they can have CSS values following their name, but they end with a {}-wrapped block, similar to a qualified rule. Even the contents of these blocks are specific to the given at-rule: sometimes they contain a sequence of declarations, like a qualified rule; other times, they may contain additional blocks, or at-rules, or other structures altogether.
Read further At-rules (W3C specification)Media-specific style sheets: the @media rule
The @media at-rule begins with a media type and a list of optional media queries. Its block contains entire rules, which are only applied when the @media's conditions are fulfilled.
@media print {
body { font-size: 10pt }
}
A media type is a broad category of user-agent devices on which a document may be displayed. The original set of media types were defined in HTML4, for the media attribute on <link> elements.
Read further media types: all, print, speech, screen.The Viewport
The viewport is the user's visible area of a web page. HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. You should include the following <meta> viewport element in all your web pages:
<meta name="viewport"
content="width=device-width,initial-scale=1.0">