扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了前端开发中移动端适配的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
单县网站建设公司创新互联,单县网站设计制作,有大型网站制作公司丰富经验。已为单县成百上千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的单县做网站的公司定做!一、百分比
使用场景:只要求宽度随屏幕自适应,比如文字块
百分比在PC端自适应上也经常用到,着实相当好用,但它一般用于宽度自适应的设置,高度设置百分比时,要求其父类元素有明确高度。
1、利用百分比实现填充全屏
为了让元素设置height:100%生效,并且正好为窗口高度,则需要给html和body元素以及它所有的父元素都设置高度100%。
例如:
填充全屏啦
在使用height: 100%;时需要注意的一些事项
Margins 和 padding 会让你的页面出现滚动条,也许这是你不希望的。
如果你的元素实际高度大于你设定的百分比高度,那元素的高度会自动扩展。
写到这里我突然想插个题外话,对于absolute定位的元素,用height:100%显然也是无效的,因为此时它已经脱离了文档流,此时它的高度由自身内容撑开。这是如果我希望它填满父盒子,怎么做?这里有个黑魔法,设置它的top,left,bottom,right均为0,这时盒子就会被拉伸至填满父盒子。
2、利用百分比实现宽高比固定
有时,我们希望宽度自适应,高度随宽度变化而变化,并有固定的宽高比。
让我们缕缕,用height百分比显然不行,height百分比是以父元素高度为基准的,而我们需要以宽度为基准来设置高度。
所以这里可以用到padding-top或者padding-bottom,padding是以父元素的width为基准的。我们可以设置元素的height:0,然后用padding-bottom将元素撑开,以实现固定宽高比。
二、rem
使用场景:对于图片等对高度自适应有要求的场景
rem单位:以页面根字体的大小,也就是html元素字体的大小为基准,例如
html{ font-size:16px; }
那么1rem等于16px。
所以使用时,我们只要让根字体大小随屏幕大小自适应,那页面中所有使用rem单位来设置宽高的元素,大小也会随屏幕大小自适应了。
根据不同屏幕大小设置根字体大小有两种方法:
1、css方法设置rem
利用媒体查询,根据不同的屏幕大小进行设置,缺点就是一般只列举一些代表性的屏幕大小,自适应不能充分覆盖所有范围
html{ font-size:10px } @media screen and (min-width:321px) and (max-width:375px){ html{ font-size:11px } } @media screen and (min-width:376px) and (max-width:414px){ html{ font-size:12px } } @media screen and (min-width:415px) and (max-width:639px){ html{ font-size:15px } } @media screen and (min-width:640px) and (max-width:719px){ html{ font-size:20px } } @media screen and (min-width:720px) and (max-width:749px){ html{ font-size:22.5px } } @media screen and (min-width:750px) and (max-width:799px){ html{ font-size:23.5px } } @media screen and (min-width:800px){ html{ font-size:25px } }
2、JS方法设置rem
利用JS设置根字体大小,所以若改变发生在渲染完成之后,则会引起回流,导致闪屏现象。因此使用这种方法时,应将JS代码放入head头部中并且在CSS引入之前。
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 375) + 'px'; }; recalc(); if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); })(document, window);
上面clientWidth为实际屏幕的宽度,而375为设计稿基于的参考屏幕宽度,20则是当实际屏幕宽度等于参考屏幕宽度时,1rem的大小。代码的关键参数20和375是这样设置的:
a) 由于提供的设计稿现在基本都是以iPhone6/7/8为参考的,宽度为750px,dpr为2,所以计算rem时的参考屏幕宽度可以设置为375。
b) 由于chrome的最小字体是12px,又为了计算方便,所以可以设置1rem的大小为20px
应用过程中,比如我们拿到了一个750的设计稿,那么首先,将设计稿里的数值除以2,得到按手机屏幕大小布局的数值(这也是375的由来)。然后,再除以20就可以将设计稿中的px转化为rem了。
三、媒体查询
使用场景:一般利用媒体查询来进行特殊处理,比如
1、iphoneX这类全屏的适配
2、在适配dpr为3的iPhone Plus或者pad横屏等超级大屏时,需要根据业务需求设置临界值,然后展示不同内容或者替换不同分辨率图片(也就是常说的2倍图、3倍图的使用)等
四、vw、vh
vw是以屏幕宽度为基准的百分比单位,1vw=1% * deviceWidth
vh是以屏幕高度为基准的百分比单位,1v=1% * deviceHeight
vw,vh确实很好用,但是目前使用时仍需考虑兼容性的问题,在国内一些手机自带浏览器里(比如华为)会失效,并且据说碰上X5内核时也容易踩坑 。
感谢你能够认真阅读完这篇文章,希望小编分享的“前端开发中移动端适配的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流