HTML5 responsive (Adaptive) web page design implementation, html5 adaptive
This article introduces the implementation of HTML5 responsive (Adaptive) web page design and shares it with you as follows:
Step 1: add a line of viewport meta tag to the header of the webpage code
<meta name="viewport" content="width=device-width, initial-scale=1" />
Viewport is the default width and height of the webpage. The code above indicates that the webpage width is equal to the screen width (width = device-width) by default, and the original scaling ratio (initial-scale = 1) is 1.0, that is, the initial page size accounts for 100% of the screen area.
All mainstream browsers support this setting, including IE9. For older browsers (mainly IE6, 7, 8), you need to use css3-mediaqueries.js
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
Step 2: (Note) do not use absolute width, font size
width:auto; / width:XX%;
Step 3: (Note) font size
The font size is 100% of the default page size, that is, 16 pixels.
Do not use absolute size "PX" for the font, or use relative size "REM"
html{font-size:62.5%;}
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }
Step 4: Flow Layout
The meaning of "flow layout" is that the positions of each block are floating, not fixed.
.left{ width:30%; float:left} .right{ width:70%; float:right;}
The advantage is that if the width is too small and there are no more than two elements, the subsequent elements will automatically scroll below the previous element and will not overflow in the horizontal direction, avoiding the appearance of the horizontal scroll bar.
Step 5: select to load CSS
The core of "Adaptive Webpage Design" is the Media Query module introduced by CSS3. Automatically detects the screen width and loads the corresponding CSS file.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
The code above indicates that if the screen width is less than 600 pixels (max-device-width: 600px133, The css600.css file is used.
If the screen width is between and, the css600-980.css file will be added.
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />
Additionally (not recommended): In addition to loading CSS files with html tags, you can also load files in existing CSS files.
@import url("css600.css") screen and (max-device-width: 600px);
Step 6: CSS @ media rules
@media screen and (max-device-width: 400px) { .left{ float:none;} }
When the screen is less than 400, left is unfloat
Step 7: Adaptive Image
"Adaptive Webpage Design" also requires automatic scaling of images.
img, object {max-width: 100%;}
The old version of IE does not support max-width, so it has to be written:
img {width: 100%;}
Image distortion may occur during image scaling on windows. In this case, you can try to use the proprietary command of IE.
img { width:100%; -ms-interpolation-mode: bicubic;}
Or use js -- imgSizer. js
addLoadEvent(function() { var imgs = document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });
Note: if conditions are available, it is best to load images of different resolutions based on the screen sizes.
Simple operation:
<style type="text/css"> img{ max-width:100%;} video{ max-width:100%; height:auto;} header ul li{ float:left; list-style:none; list-style-type:none; margin-right:10px;} header select{display:none;} @media (max-width:960px){ header ul{ display:none;} header select{ display:inline-block;} } </style> <body>
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
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
