前言

　　　　首先你要知道 vw 和 rem 是什么？怎么使用？

　　　　①：简单来说 vw 是视口单位，相当于把视口等分成了100，1vw = 1;

　　　　②：rem是相对单位，设置根元素 html 的 font-size，比如给 html 设置字体大小为100px，1rem = 100px;

　　　　注：我之前针对 vw 和 rem 分别写过一篇博客，详见如下

　　　　　　vw：https://www.cnblogs.com/tu-0718/p/9906692.html

　　　　　　rem：https://www.cnblogs.com/tu-0718/p/9146631.html

　　

　　正文

　　　 还记得第一次知道 rem 时，我的心情如沐春风，感觉找到了新大陆

　　　  那时常为移动端写自适应页面而苦恼，传统的百分比布局和媒体查询早已让我心力交瘁

　　　  百分比布局的缺点：宽度虽然能随屏幕自适应，但高度固定不变，当设备屏幕越来越大，会有一种被强行拉伸的既视感，用户体验差

　　　  媒体查询的缺点：CSS 代码量增多，体积增大，要为每一个不同分辨率的设备单独写一套样式来自适应，这样的话我宁愿狗带

　　　　  在这种情况下，rem 的出现无异于黑暗中的一道曙光，不过它也有一个缺点

　　　  rem的缺点：需要引入一段JS代码，这样违背了样式行为分离的思想，而且耦合深，无法解耦

　　　  不过，对于很多人来说这并不是问题，毕竟引入一段 JS 代码能省去那么多麻烦，何乐而为呢？

　　　 如果你对 rem 的这个缺点无法忍受或追求更好的解决方案，那么 vw 无疑会是你的另一道曙光

　　　 使用 vw，不需要引入 JS 代码就能达到比 rem 更好的效果，并且相对于视口，所以在宽屏上也能很好的显示

　　　 vw的缺点：vw 虽然好用，但却有一个蛋疼的地方，因为相对于视口，所以失去了最大宽度/高度的限制，

　　　　　　　　  可能你在宽屏上看到完美，竖屏上就不忍直视了。这时需要你额外为元素添加最大宽度/高度来限制

　　　 　　　

　　　说了这么多，难道就没有一种方法能够让我们真正身心愉悦的写移动端的页面了吗？答案是肯定的！！！

　　　但俗话说得好，三个臭皮匠，顶个诸葛亮。既然单独一种方法不行，我们就打配合嘛，这样 vw + rem 的方式就应运而生了

　　　①：我们以 iPhone6为基准，屏幕宽度为375px，然后换算成 vw

　　　　　375 / 100 = 3.75;

　　　　注：vw 是视口单位，被均分成了100，1vw = 1，所以根据上面计算，1vw = 3.75px

　　　②：一般使用 rem 会给 html 的 font-size 设置大小为 100px，因为方便计算，这里需要把100px 换算为 vw

　　　　100 / 3.75 = 26.6666666vw；

　　　 注：上面结果能最大限度减少像素偏差，经测试，若值舍五入为27vw或26vw都会有1-2像素的偏差

　　　原文参考：http://www.cnblogs.com/xwkj/p/10308082.html

　　　Demo

　　  此时表面上看html的font-size被设置为26.6666666vw，但实际html的font-size为100px，1rem = 100px

　　　元素的值还是用rem，而不是用vw，这么说可能有点绕，运行下面demo在iPhone6下查看就会明白了

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title></title>

    <style>

        html {

            font-size: 26.6666666vw;

        }

        div {

            margin: 0.2rem auto;

            width: 3rem;

            height: 0.3rem;

            line-height: 0.3rem;

            color: #fff;

            font-size: 0.16rem;

            text-align: center;

            background-color: #000;

        }

    </style>

</head>

<body>

    <div>我是第一</div>

    <div>我是第二</div>

    <div>我是第三</div>

</body>

</html>

　　　　

　　　　注：上面div的 font-size 我用的 rem，没用px，主要想让demo效果更明显。

　　　　　　在实际项目中，有时并不想让字体随设备屏幕变大而变大，可根据项目需求选择为 font-size 设置 rem 还是 px

　

　　

移动端布局方案—vw+rem的更多相关文章

  1. 移动端适配方案以及rem和px之间的转换

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  2. 移动端布局方案汇总&&原理解析

    阿里flexible布局 - 版本1.x 该布局于 2017年8月9日被2.0版本取代 实现原理 假设(UI稿750px宽) 设置viewport的 scale = 1/window.devicePi ...

  3. 移动端适配方案（rem+flex）

    为什么用rem不用px? 主流:各大网站的移动版绝大多数都是用的rem.   移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334.而现在市面上大多数手机,都达到了1080* ...

  4. 移动适配请使用比rem等更好的布局方案

      移动端大行其道,rem/em.百分比.响应式方案更是层出不穷,看见周围的伙伴们都在对使用rem和百分比情有独钟,可我却偏不爱,之所以出现如此多的方法,其目的只有一个屏幕适配.   屏幕适配顾名思义 ...

  5. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

  6. 移动端布局rem em

    1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初 ...

  7. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  8. rem移动端适配方案

    一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...

  9. 利用vw+rem实现移动web适配布局

    基本概念 1.单位 Px(CSS pixels) 像素 (px) 是一种绝对单位(absolute units), 因为无论其他相关的设置怎么变化,像素指定的值是不会变化的 其实是相对于某个设备而言的 ...

随机推荐

  1. [笔记] C# 如何获取文件的 MIME Type

    MIME Type 为何物: MIME 参考手册 svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types 常规方式 对于有文件后 ...

  2. laravel npm run dev 错误 npm run dev error [npm ERR! code ELIFECYCLE]

    出现此问题是node_modules出现错误,需要执行: 1 rm -rf node_modules 2 rm package-lock.json 3 npm cache clear --force ...

  3. springcloud分布式事务Atomikos实例

    0.JTA(Java Transaction Manager)的介绍 (1)jta与jdbc 简单的说 jta是多库的事务 jdbc是单库的事务 (2)XA与JTA XA : XA是一个规范或是一个事 ...

  4. laravel报错 No query results for model . 的解决方法

    这个通常由路由绑定出的问题,注意有绑定模型的路由,同路径的路由需要放在没绑定路由的后面 例如:/product/comments和/product的是同路径,/product必须放在/product/ ...

  5. 2.原生js实现图片懒加载

    网上查了很多图片懒加载的内容, 但基本上都是jQuery实现的, 没有说清楚其原理, 所以研究了一下 多的不说, 上代码, 看不明白的建议看下我的上一篇文章<1. 图解浏览器和用户设备的宽高等属 ...

  6. 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle

    ​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...

  7. OC-bug: Undefined symbols for architecture i386: "_OBJC_CLASS_$_JPUSHRegisterEntity", referenced from:

    bug的提示: Undefined symbols for architecture i386: "_OBJC_CLASS_$_JPUSHRegisterEntity", refe ...

  8. Scrum 冲刺第三篇

    是我们是这次稳了队,队员分别是温治乾.莫少政.黄思扬.余泽端.江海灵 一.会议 1.1  27号站立式会议照片: 1.2  昨天已完成的事情 团队成员 今天计划完成的任务 黄思扬 活动平台首页(前端) ...

  9. CVE-2019-0708漏洞利用复现

    CVE-2019-0708漏洞利用复现 距离这个漏洞爆出来也有好几个月了,之前一直忙也没来得及写文档,现在重新做一遍. 准备环境: win7靶机 IP地址:172.16.15.118 Kali攻击机 ...

  10. Windows 下 pycharm 创建Django 项目【用虚拟环境的解释器】

    1.  背景 我在 Windows 下的 pycharm  直接创建 全新 Django  项目 会  pip 和其他报错 ,暂时解决不了,另外后续的多个项目只需要一套python 环境, 所以可以 ...