使用rem+vw实现简单的移动端适配CSS3 calc实现滚动条出现页面不跳动从淘宝和网易的font-size思考移动端怎样使用rem？

概述首先设置meta属性，如下代码： <meta name="viewport" content="width=device-width, initial-scale=

首先设置Meta属性，如下代码：

<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1,maximum-scale=1,user-scalable=no">

使用如下代码就能实现移动端的适配：

HTML {  Font-size: -webkit-calc(13.33333333vw); calc(13.33333333vw);}

100vw相当于浏览器的window.innerWIDth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！那么1vw就是表示1%的屏幕宽度。

其中的13.33333333vw是怎么来的呢？就是你的设计稿是750px，那么设计稿的1px就是0.133333333vw，那么100px就是13.33333333vw。也即是HTML的Font-size设置为100px相当于1rem（设计稿为750px）。那么我们就可以很轻松的换算设计稿中的单位为rem了，比如一个元素宽度为150px，转换为rem就是1.5rem。其他尺寸设计稿的计算方式依次类推。

参考网易新闻移动端的写法：

/** * vIEw-port List:320x480320x568320x570360x592360x598360x604360x640360x720375x667375x812393x699412x732414x736480x854540x960640x360720x1184720x1280800x6001024x7681080x18121080x1920 */HTML { calc(13.33333333vw);}@media screen and (max-wIDth: 320px) {  HTML {    Font-size: 42.667px;    Font-size: calc(13.33333333vw);  }}@media screen and (min-wIDth: 321px) and (max-wIDth: 360px) { 48px;}@media screen and (min-wIDth: 361px) and (max-wIDth: 375px) { 50px;}@media screen and (min-wIDth: 376px) and (max-wIDth: 393px) { 52.4px;}@media screen and (min-wIDth: 394px) and (max-wIDth: 412px) { 54.93px;}@media screen and (min-wIDth: 413px) and (max-wIDth: 414px) { 55.2px;}@media screen and (min-wIDth: 415px) and (max-wIDth: 480px) { 64px;}@media screen and (min-wIDth: 481px) and (max-wIDth: 540px) { 72px;}@media screen and (min-wIDth: 541px) and (max-wIDth: 640px) { 85.33px;}@media screen and (min-wIDth: 641px) and (max-wIDth: 720px) { 96px;}@media screen and (min-wIDth: 721px) and (max-wIDth: 768px) { 102.4px;}@media screen and (min-wIDth: 769px) {}body {  Font-family: "PingFangSC-Regular","Microsoft YaHei",Helvetica;  color: #333333;  background: #f5f7f9;}HTML a { #333333;}

这样写法也是为了兼容老版本手机不支持vw以及calc语法。

如果页面使用px单位，怎样进行rem的适配，把px转换为rem单位：

postcss-pxtorem 是一款 postCSS 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值

参考地址：

《最简单的移动端适配方案(rem+vw)》《CSS3 calc实现滚动条出现页面不跳动》《从淘宝和网易的font-size思考移动端怎样使用rem？》 总结

以上是内存溢出为你收集整理的使用rem+vw实现简单的移动端适配 CSS3 calc实现滚动条出现页面不跳动从淘宝和网易的font-size思考移动端怎样使用rem？全部内容，希望文章能够帮你解决使用rem+vw实现简单的移动端适配 CSS3 calc实现滚动条出现页面不跳动从淘宝和网易的font-size思考移动端怎样使用rem？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。