This article introduces the implementation of HTML5 responsive (adaptive) web design and shares it with everyone, as follows:
Step 1: Add a line of viewport meta tags to the head of the web page code
<meta name=viewport content=width=device-width, initial-scale=1 />
viewport is the default width and height of the web page. The above line of code means: the width of the web page is equal to the screen width by default (width=device-width), and the original scaling ratio (initial-scale=1) is 1.0, that is, the initial size of the web page occupies the screen 100% of the area.
All major browsers support this setting, including IE9. For those 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 Three: (Note) Font Size
The font size is 100% of the page's default size, which is 16 pixels
Do not use absolute size PX for fonts, 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 fluid layout is that the position of each block is floating and not fixed.
.left{ width:30%; float:left} .right{ width:70%; float:right;}The advantage is that if the width is too small to accommodate two elements, the following element will automatically scroll to the bottom of the previous element without overflowing in the horizontal direction, thus avoiding the appearance of horizontal scroll bars.
Step 5: Choose to load CSS
The core of adaptive web design is the Media Query module introduced by CSS3. Automatically detect the screen width and then load the corresponding CSS file
<link rel=stylesheet type=text/css media=screen and (max-device-width: 600px) href=style/css/css600.css />
The above code means that if the screen width is less than 600 pixels (max-device-width: 600px), load the css600.css file.
If the screen width is between 600 pixels and 980 pixels, load the css600-980.css file
<link rel=stylesheet type=text/css media=screen and (min-width: 600px) and (max-device-width: 980px) href=css600-980.css />
Also (not recommended): In addition to loading CSS files with html tags, you can also load them 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 smaller than 400, left cancels the floating
Step 7: Adaptation of images
Responsive web design must also implement automatic scaling of images.
img, object {max-width: 100%;}Older versions of IE do not support max-width, so I have to write:
img {width: 100%;}When scaling images on Windows platform, image distortion may occur. At this time, you can try to use IE's proprietary command
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 possible, it is best to load images of different resolutions according to different 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> <header> <ul> <li><a href=# class=active>Home</a></li> <li><a href =#>AAA</a></li> <li><a href=#>BBB</a></li> <li><a href=#>CCC</a></li> <li ><a href=#>DDD</a></li> </ul> <select> <option class=selected><a href=#>Home</a></option> <option value=/AAA>AAA</option> <option value=/BBB>BBB</ option> <option value=/CCC>CCC</option> <option value=/DDD>DDD</option> </select> </header> </body>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.