Response-type mobile website highlights and response-type mobile phone highlights

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.