Response-type mobile website highlights and response-type mobile phone highlights
Many browsers in CSS3 are incompatible. You need to add a prefix Based on the browser kernel:
Firefox-moz-
Google and apple-webkit-
Ie9 and later versions-ms-
Openg-o-
In earlier versions of the apple browser (safari) linux konqueror, you need to add:-khtml-
Google 2013 developed its own new kernel blink
Response-type mobile phone webpage: [change the style sheet (Media query: Allows css to choose whether to be used based on the browser width, js change)
; Constrain the view; stream layout (for percentage write width, padding, margin )]
Event of the window object: onload loaded, onresize adjusted, and onsrcoll scroll wheel.
Js change style sheet
<Script type = "text/javascript">
// Change the style sheet, which must be executed once during page loading and when the browser size changes
Gaibian ();
Window. onresize = gaibian;
Function gaibian (){
Var kuandu = document.doc umentElement. clientWidth; // browser width
If (kuandu> 600 ){
Document. getElementById ("mylink"). href = "css/1.css ";
} Else {
Document. getElementById ("mylink"). href = "css/2.css ";
}
}
<Script>
Change the style sheet (Media query) based on the width of css ):
<Link rel = "stylesheet" href = "css/1.css" type =" text/css "media =" (min-width: 800px) ">
<Link rel = "stylesheet" href = "css/2.css" type =" text/css "media =" (max-width: 799px) and
(Min-width: 600px) ">
<Link rel = "stylesheet" href = "css/3.css" type =" text/css "media =" (max-width: 599px) ">
CSS
799 ≥ width ≥ 600 2.css
500 ≥ width 3.css
Media query compatibility ie9 and later, js detection width change style sheet is ie6 is also compatible
Constraint View]
<Meta content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-
Scale = 1.0, user-scalable = no "name =" viewport "id =" viewport/">
A meta tag with the id and name as viewport indicates that the view is now constrained. The specific constraint rules are written in the content,
Each constraint rule is separated by a comma.
Width = device-width -- the width of the command view, which is changed to the width of the device (based on the screen size of 1024*768. Iphone and other mobile phones
It is usually 320 ~ Between 380)
Initial-scale = 1.0 -- the default zoom level of the command view is 1.
Minimum-scale = 1.0 -- minimum zoom level of the command view is 1
Maximum-scale = 1.0 -- the maximum zoom level of the command view is 1.
User-scalable = no -- users are not allowed to zoom in the page.
The pc interface is used when the device width is greater than 980;
When the width of your device is 620 ~ Between 979, using the pad interface;
When the width of your device is less than 619, use the mobile phone interface.
[Slideshow]
Use swipe. js