1. Using META tagsMETA tags are mainly used to describe the properties of an HTML page document, such as the author, date time, page description, keywords, page refresh, and its description and keywords attributes, can be added to the site's keywords, so that the Web page is conducive to search engines. <meta name= "viewport" content= "width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>Explanation: Viewport refers to the visual area of the user's Web page, the content of the "width" refers to the virtual window width, the above code means that the virtual window/page width of the initial ratio of 1, the minimum scale is 1, the maximum scale is 1, the user is not extensible, the page is not scalable. the above label only supports one size, the correct way is to use JS dynamic generation of the following tags, if you want to get the screen size first. <script type= "Text/javascript" >var phonewidth = parseint (window.screen.width);var phonescale = phonewidth/640;var ua = navigator.useragent;if (/android (d+.d+)/.test (UA)) {var version = parsefloat (regexp.$1);if (version>2.3) {document.write (' <meta name= "viewport" content= "width=640, Minimum-scale = ' +phonescale+ ', Maximum-scale = ' +phonescale+ ', target-densitydpi=device-dpi ' > '); }else{document.write (' <meta name= ' viewport ' content= ' width=640, target-densitydpi=device-dpi ' > ');}else {document.write (' <meta name= "viewport" content= "width=640, User-scalable=no, target-densitydpi= device-dpi ">"); }</script> 2. Percentage methodThe percentage in the CSS that is relative to the width of the parent element. The padding-left:50% of the child element, the width of the parent element is hundred, the margin-top:20% of the child element, then the parent element is hundred. The body default width is the width of the screen (the width of the browser in the PC) the descendant elements are positioned as a percentage (or a specified size). But this is only suitable for the layout of simple pages, complex page implementation is very difficult. 3. Use CSS3 unit REMThe width of the window, which is the width of window ($ (window)), is first determined at the beginning of page loading. is not the screen resolution width (screen.width), the difference please self-check), assuming that the width of W, a div in the width of 640px design under the width of dW1, if the HTML font-size is 100px, then the width of the div is the number of REM? calculation: div width dw2=dw1/100,px and rem conversion divided by 100 can be, this is assumed the screen width of 640, and different width of the screen how to handle, in order to ensure that the conversion is easy to set a suitable font-size for HTML, calculated: 100 /640 = fontsize/w, fontSize = w/640 * = w/6.4. Most browser font-size have a minimum value of 12px, so only 100 is used as the scale. so this JS code will be added to the head:<script type= "Text/javascript" >var html = document.queryselector (' html ');var rem = html.offsetwidth/6.4;html.style.fontSize = rem + "px";</script> 4. Media Enquirymedia queries are just for solving web pages adapted to the phone screen. The function of media query is to set different CSS style, page size, device screen size for different "media", for example, we want to set style for the element of class= "icon" in the page with width less than 480px, can write this, @media screen and ( max-width=480px) {. icon{some styles}}; Specifically, you can study it yourself. the above methods are for your reference only. If anything is wrong, please correct me. The production of adaptive pages need a better programming foundation and technical awareness, the general small white, do not recommend that everyone to do self-adaptive web pages specifically learn HTML5, CSS3 and JS, after all, this is not overnight can learn. If the technology small white want to do adaptive Web pages, here to provide you with a way of thinking, with the building station box. Without the need for programming fundamentals, drag and drop all the way to make the most amazing adaptive website. Now there are free site activities, regardless of the layman, you can register to experience. Free Sign Up experience: IISP.COM/USER/REGISTER.PHP?S=HYC
How do I make a HTML5 page that adapts to the size of your computer and phone?
