Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve html5 mobile adaptive layout, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Two ways of adaptive layout that I know

1. Using media queries, the following adaptation methods are developed. For example, the first one indicates that the screen width is between 320px-360px, and the html font size is adapted to 13.65px.

Media only screen and (max-width: 360px) and (min-width: 320px) {html {font-size:13.65px;}} @ media only screen and (max-width: 375px) and (min-width: 360px) {html {font-size:23.4375px;}} @ media only screen and (max-width: 390px) and (min-width: 375px) {html {font-size:23.4375px } @ media only screen and (max-width: 414px) and (min-width: 390px) {html {font-size:17.64px;}} @ media only screen and (max-width: 640px) and (min-width: 414px) {html {font-size:17.664px;}} @ media screen and (min-width: 640px) {html {font-size:27.31px;}}

two。 Responsive, get the width of the screen, calculate a certain proportion, use rem instead of px, such as font-size:1rem, the size effect displayed on phones with different screen size is different, and the scale is adaptive to the size of the phone screen:

(function (doc, win) {var docEl = doc.documentElement, / / the root element html / / determines whether the window has an orientationchange method, assigns a value to a variable, and returns the resize method if not. ResizeEvt = 'orientationchange' in window? 'orientationchange':' resize', recalc = function () {var clientWidth = docEl.clientWidth; if (! clientWidth) return; / / sets the fontSize size of the document to be proportional to the window to achieve a responsive effect. If (clientWidth > = 640) {clientWidth = 640;} docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; console.log (clientWidth); console.log (docEl.style.fontSize);}; recalc (); if (! doc.addEventListener) return; win.addEventListener (resizeEvt, recalc, false) / / the addEventListener event method accepts three parameters: the first is the event name such as click event onclick, the second is the function to be executed, and the third is Boolean doc.addEventListener ('DOMContentLoaded', recalc, false) / / bind browser zoom and load time}) (document, window). These are all the contents of the article "how to achieve adaptive layout of html5 mobile". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.