1. Talk about a few concepts first
pixels are units of measure and can be understood as points
1.css pixels
The units measured in HTML are calculated using PX, which tends to be 1 css px = 1 physical pixels in the PC
1css pixels in different devices correspond to different device pixels (physical pixels)
For example: Iphone3 resolution is 320*480 that is css 1px = 1 physical pixels, iphone4 resolution 640x960 But the screen size does not change, meaning the same area pixels more than 1 time times that css 1px = 2 physical pixels;
2. Physical pixels
Represents the number of pixels per inch, the higher the value, the higher the density of the screen to display the image
3. Resolution
The more pixels the display can display, the more pixel the monitor displays, the finer the picture, and the more information the same screen area can display
4.PPI: is the number of pixels (Pixel) owned per inch
2.css those units
PX: Absolute Unit, page by exact pixel display
100%: Not fixed, depending on the parent element
EM: Relative units, the reference point is the size of the parent's font, if you define the font-size by itself (the browser default font is 16PX), the entire page 1em is not a fixed value.
REM: relative unit, can be understood as "root em", relative to the root node HTML font size to calculate, CSS3 new attributes, chrome/firefox/ie9+ support.
Vw:viewpoint width, window width, 1vw equals 1% of the window width.
Vh:viewpoint height, window height, 1VH equals 1% of the window height.
The smaller of the VMIN:VW and VH.
The larger of the VMAX:VW and VH.
VW, VH, VMIN, vmax:ie9+ partial support, Chrome/firefox/safari/opera support, IOS Safari 8+ Support, Android browser4.4+ support, Chrome for ANDROID39 support
3. Which method is more suitable for screen adaptation?
1.px?
Bad use is because no matter where it is the same value, so it makes a big difference, such as font-size:14px,pc 14px than the phone's 14px is bigger
2.1%?
Percent layout: div structure Adaptive, font can not adapt, not good
3.em?em equals the size of the font under the current element
The bad part is a change, it's going to be a mess.
4.VW,VH Although very useful but the current browser support is not old and old high.
5. Synthetic above here the REM is recommended, depending on the width of the screen setting of REM, when the screen becomes larger, all changes subsequently.
REM Adaptation key points:
1. Get the current screen size
2. Set the fontsize of the HTML that is REM
3. When the screen size changes, the trigger function recalculates
4. About the code used:
Get the current screen size with:
1, if the page contains a standard statement (that is, the page plus <! DOCTYPE HTML "> This line of code, the existence of a standard declaration will have an effect on the property values of Document.body and document.documentelement),
You should use Document.documentelement
2, if the page only
6. The specific code is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> About screen fitting </title>
<style type= "Text/css" >
*{
margin:0;
padding:0;
}
. main{
Width:10rem;
Height:6rem;
background:red;
}
</style>
<body>
<div class= "Main" >
I'm all right, everybody, good and good.
</div>
<script type= "Text/javascript" >
Do not want to manually refresh, want to automatically refresh the page when finished loading
So we define an anonymous function.
(function (Win,doc) {
var fres=function () {
var html=doc.documentelement;
Gets the width of the screen
var w=html.clientwidth;
Console.log (w);
FontSize is set to 1/10 large, REM
Set FontSize
html.style.fontsize=w/10+ ' px ';
}
If the page has finished loading, call function Fres (),
Otherwise the listening page is loaded and finished fres ();
Page load Complete the judging method is extracted from jquery
if (document.readystate=== ' complete ') {
Fres ();
}else{
Document.addeventlistener (' domcontentloaded ', fres,false);
}
Win.addeventlistener (' resize ', fres,false);
}) (Window,document)
</script>
</body>
Front-end about 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
