Home > Industries > Media
The mobile browser will narrow down a standard webpage to match the device's viewable area (the standard technical term is called "viewport"). The user then zooms in on the content area of interest
In most cases, depending on the viewport size, the user is given a visual effect that matches it or is preferred
When using the vendor prefix, follow the cascading nature of the stylesheet, putting the prefix code at the end so that if the attribute is available, the previous declaration is overwritten
Use CSS's @import directives to introduce other style sheets conditionally in the current style sheet, eg:
@import url ("phone.css") screen and (max-width:360px);
The @import method of using CSS increases the HTTP request (which affects loading speed)
Part of the feature that media queries can detect
When you create a media query, it is most commonly used for the device's viewport widths (width) and screen width (device-width).
Width: viewport widths
Height: Viewport Height
Device-width: The width of the rendered surface (for us, the width of the device screen)
Device-height: Ibid. (height of device screen)
Orientation: Check whether the device is in landscape or portrait orientation
Aspect-ratio: The aspect ratio based on the width and height of the viewport. A 16:9-scale display can be defined like this ASPECT-RATIO:16/9
Device-aspect-ratio: Aspect ratio based on device render plane width and height
Color: The number of bits per color. For example, Min-color:16 detects if the device has a 16-bit color
Resolution: Used to detect the resolution of a screen or printer, such as min-resolution:300dpi. You can also accept measurements of pixel points per centimeter, such as MIN-RESOLUTION:118DPCM
All of the above features can use the Min and Max prefixes to create a query scope
CSS cascading style sheets, called cascading, refers to styles in the style sheet that override the previous style (unless the previous style has a higher specificity). You can set the base style at the beginning of the style sheet to fit all the designs, and then use media queries to further rewrite the appropriate sections
The Safari browser on iOS defaults to rendering the page on a 980-pixel-wide canvas, and then shrinks the canvas to match the viewport size
Prevent the mobile browser from automatically resizing pages
Viewport meta element overrides the default screen zoom setting
<meta name= "viewport" content= "Initial-scale=2.0,width=device-width"/>
Content= "initial-scale=2.0" means to enlarge the page twice times, Width=device-width tells the browser page width should be equal to the device width.
The <meta> tab also controls the extent to which the page can be scaled, allowing the user to enlarge the page up to 3 times times the width of the device, up to half the device width
<meta name= "viewport" content= "width=device-width,maximum-scale=3,minimum-scale=0.5"/>
Prohibit user scaling:
<meta name= "viewport" content= "Initial-scale=1.0,user-scalable=no"/>
User-scalable=no is a non-scaling
Setting the zoom scale to 1.0 indicates that the browser renders the page according to the actual size of its viewport. Setting the width to device width means that browsers that support this feature will render the page according to the actual size of the device width
<meta name= "viewport" content= "width=device-width,initial-scale=1.0"/>
Original code structure fragment:
<div id= "sidebar" >
<p>here is the sidebar</p>
</div>
<div id= "Content" >
<p>here is the content</p>
</div>
After swap position:
<div id= "Content" >
<p>here is the content</p>
</div>
<div id= "sidebar" >
<p>here is the sidebar</p>
</div>
Although we swapped the label position, the display of the page in the large viewport did not change, because the sidebar and content area used the Float:left and Float:right properties respectively. But on the ipad, it becomes the first display content area, the following is the sidebar
Flow layout to ensure smooth display of pages between media query breakpoints
<Body><DivID= "wrapper"> <DivID= "header"> <DivID= "Navigation"> <ul> <Li><ahref="#">Navigation1</a></Li> </ul><ahref="#">Navigation2</a></Li> </ul> </Div> </Div> <DivID= "Content"> <P> That's films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it? We ' re Here's put things right.that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic Heroes lose out. Not very Hollywood is it? We ' re Here's put things right.that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic Heroes lose out. Not very Hollywood is it? We ' re Here's put things right.that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic Heroes lose out. Not very Hollywood is it? We ' re Here's put things right.that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic Heroes lose out. Not very Hollywood is it? We ' re Here's put things right.that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic Heroes lose out. Not very Hollywood is it? We ' re here to put things right.</P> </Div> <DivID= "sidebar"> <P>The sidebar</P> </Div> <DivID= "Footer"> <P>The footer</P> </Div></Div></Body>
*{padding:0;margin:0;}#wrapper{Margin-right:Auto;Margin-left:Auto;width:960px;Border:1px solid Red;}#header{Margin-right:10px;Margin-left:10px;width:940px;Background-image:URL (images/buntingfw.png);}#navigation ul Li{Display:Inline-block;}#sidebar{Margin-right:10px;Margin-left:10px;float: Left;Background-color:#fe9c00;width:220px;}#content{Margin-right:10px;Margin-left:10px;float: Right;width:700px;Background-color:#dedede;}#footer{Margin-right:10px;Margin-left:10px;Clear:both;Background-image:URL (images/buntingfwinvert.png);width:940px;}@media screen and (max-width:768px){#wrapper {width:768px; }#header, #footer, #navigation{width:748px; }#content, #sidebar{Margin-top:20px;Padding-right:10px;Padding-left:10px;width:728px; }}
Responsive layout-Media queries
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
