4种移动端适配方法 |
您所在的位置:网站首页 › web页面适配 › 4种移动端适配方法 |
1.@media screen实现网页布局的自适应 优点 : 无需插件,能够适应各种窗口大小,只需在CSS中添加@media screen属性。 官方文档:@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 语法:@media mediatype and|not|only (media feature) { CSS-Code; } /* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */ h5{ color: black; } @media screen and (max-width: 1200px){ h5{ color: #eee; } } /* h5字体颜色为红色,屏幕宽度只有在869px 与900px之间生效 */ @media screen and (min-width: 869px) and (max-width: 900px){ h5{ color: red; } } /* 屏幕宽度小于 320px 则 h5 的字体大小是20px */ @media only screen and (max-width: 320px){ h5{ font-size: 20px; } }登录后复制紧接着我开始接触移动端的适配。 2.rem适配 这个方法是CSDN博主「sxs1995」的原创文章,blog.csdn.net/sxs1995/art… 计算单位是 640px = 6.40rem, 当设计稿的宽度是 750px 时, i = 750; 当设计稿的宽度是 640px 时, i = 640 。 缺点 : 首次加载页面时,会闪线1-2s,在手机上预览的用户体验不好 !function(n){ var e=n.document, t=e.documentElement, i=720, d=i/100, o="orientationchange"in n?"orientationchange":"resize", a=function(){ var n=t.clientWidth||320;n>720&&(n=720); t.style.fontSize=n/d+"px" }; e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1)) }(window);登录后复制3.用@media实现rem适配 优点:当屏幕宽度更改时,只需修改Html元素中的 font-size 即可适配 /* 不同屏幕宽度,设置不同的font-size */ @media screen and (width:750px){html{font-size:100px}} @media screen and (width:749px){html{font-size:99.87px}} @media screen and (width:748px){html{font-size:99.73px}} ... @media screen and (width:321px){html{font-size:42.8px}} @media screen and (width:320px){html{font-size:42.67px}}登录后复制4.用vw定制rem自适应布局 在掘金上看到作者JowayYoung的灵活运用CSS开发技巧的文章,其中一点是:使用vw定制rem自适应布局 优点 : 移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制 /* 基于UI width=750px DPR=2的页面 */ html { font-size: calc(100vw / 7.5); }登录后复制目前,以上的方法我都用过,站在代码量上考虑,我现在主要用的是用vw定制rem自适应布局,大家有其他更好的建议吗?我会认真参考的,谢谢。 推荐教程:《CSS教程》 以上就是4种移动端适配方法的详细内容,更多请关注php中文网其它相关文章! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |