html 移动端 屏幕自适应,html5 自适应

　　场景：适应各种尺寸的屏幕

　　适应性布局我知道两种方法。

　　1.使用媒体查询，下面列出了几种适应方法。比如第一个表示屏幕宽度在320px-360px之间，html字体大小适配13.65px

　　style @media only屏幕和(最大宽度：360像素)和(最小宽度：320像素){ html { font-size:13.65像素；} } @media only屏幕和(最大宽度：375px)和(最小宽度：360 px){ html { font-size:23.4375 px；} } @media only屏幕和(最大宽度：390px)和(最小宽度：375 px){ html { font-size:23.4375 px；} } @media only屏幕和(最大宽度：414px)和(最小宽度：390 px){ html { font-size:17.64 px；} } @media only屏幕和(最大宽度：640px)和(最小宽度：414 px){ html { font-size:17.664 px；} } @媒体屏幕和(最小宽度：640 px){ html { font-size:27.31 px；}} /style2。响应式，得到屏幕宽度，计算一定比例，用rem代替px。在使用时，如font-size: 1REM，在不同屏幕尺寸的手机上显示的大小效果是不一样的，是与手机屏幕的大小比例相适应的。

　　Script (function (doc，win){ var docel=doc . documentelement，//根元素html //确定窗口是否有orientationchange方法。如果有，它将被赋给一个变量；如果没有，它将返回到resize方法。窗口中的resizeEvt=orientationchange ？orientationchange : resize ，recalc=function(){ var client width=docel . client width；如果(！clientWidth)返回；//将文档的fontSize大小设置为与窗口成比例的大小，以达到响应式的效果。if(client width=640){ client width=640；} docel . style . font size=20 *(client width/320) px ；console . log(client width)；console . log(docel . style . font size)；};recalc()；如果(！doc.addEventListener)返回；win.addEventListener(resizeEvt，recalc，false)；//addEventListener事件方法接受三个参数：第一个是click event onclick之类的事件名称，第二个是要执行的函数，第三个是布尔值doc。addevent listener( domcontentLoaded ，recalc，false)//绑定浏览器缩放和加载时间})(document，window)；/script div id= div 2 class= text style= border:0.04 rem solid # CCC；身高：14雷姆； font-size:0.5 rem；关于html5移动自适应布局实现的这篇文章到此结束。更多相关html5移动自适应内容，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。