1.rem
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no"/> <title>Document</title> <style>HTML{font-size:20px; Set 1rem represents the size, generally choose 20 better calculation }Body{margin:0;Overflow:Hidden; } </style></Head><Body> <Script> (function(Doc, win) {varHTML=Doc.documentelement,resizeevt= 'Orientationchange' inchwindow? 'Orientationchange' : 'Resize',//Phone horizontal screen, vertical screen can be set here Recalc= function(){ varclientwidth=Html.clientwidth; if (!clientwidth)return; DocE1.style.fontSize= -*(clientwidth/+ ' px '; iphone4 screen as a benchmark }; if (!Doc.addeventlistener)return; Win.addeventlistener ('domcontentloaded', Recalc,false); //$ (window). On (' Resize ', function () {})}) (document, window); </Script></Body></HTML>
The above code is the screen adaptation of the entire framework, can be used for mobile phones, tablets, computers.
You can write your own code, in rem units (this code 1rem=20px);
Has the zoom effect, in PX, is the absolute value, does not change with the screen size change;
In percent, note that all parent elements of the label are in percent, with the same zoom effect;
2. Consider from the CSS perspective
<MetaCharSet= "UTF-8"> <title>Document</title> <style>Html,body{margin:0;padding:0; } . wp{
Width:800px;
} @media screen and (min-width:1000px) { }@media screen and (min-width:640px) and (MAX-WIDTH:999PX){. WP{width:800px; }} @media screen and (max-width:639px){ . wp{
Width:800px;
} } </style></Head><Body> <Divclass= "WP"> </Div></Body></HTML>
In the code above, a @media represents a screen size, which is equivalent to an if statement in JS, and then the styles displayed on different screens are written into their own @media, which is a large amount of code, the screen class is also quite a lot of
H5 Mobile-screen adaptation
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
