一、知识点1、em&&rem&&vw/vhem：根据当前样式里面定义的font-size大小来计算，如当前样式里面没定义font-size，那么就根据父级上的font-size大小来计算如：.box{font-size:20px;//此时1em=20pxheight:20em;//那么，20em=400px，也就是height:400px}rem：只根据html上的
分类：
移动开发 时间：
2018-12-08 18:29:05
阅读次数：
195
通过rem来实现响应式布局：首先来看，什么是rem单位。rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为16px，rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的
分类：
Web程序 时间：
2018-12-04 20:05:07
阅读次数：
170
通过rem来实现响应式布局： 首先来看，什么是rem单位。rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为16px， rem单位都是相对于 ...
分类：
Web程序 时间：
2018-12-04 19:02:19
阅读次数：
224
需求：我们项目的需求是 一、vh vw vw和vh是相对于视口（viewport）的宽度和高度。由于现在移动设备的屏幕尺寸之差别，如果仍然根据屏幕的物理分辨率来设计网页，效果很难统一，因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置，视口的长宽可以跟设备的物理 ...
分类：
Web程序 时间：
2018-12-01 18:44:29
阅读次数：
226
预期效果：一行显示三张图片，宽度随屏幕宽度而改变。~~css3的新单位vw vh由于兼容性问题就不提了。~~ 一个比较好的方案是：设置垂直方向的 padding 撑开容器 在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding的百分比数值计算。 margin, padding ...
分类：
Web程序 时间：
2018-11-23 20:49:18
阅读次数：
219
1、引入阿里的 lib-flexible 库，它会自动根据移动端设备的缩放比自动设置meta viewport标签，然后自动设置html根元素的font-size值，然后我们还是要根据一般iphone6的比例来自己计算成rem。2、采用vw单位，vue项目中可以使用 postcss-px-to-vi ...
分类：
移动开发 时间：
2018-11-05 10:11:40
阅读次数：
232
css3新单位vw、vh、vmin、vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小 ...
分类：
Web程序 时间：
2018-10-29 20:38:32
阅读次数：
213
Equal to the smaller of vw and vh. ...
分类：
Web程序 时间：
2018-10-15 11:46:08
阅读次数：
251
视口单位(Viewport units) 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指 ...
分类：
Web程序 时间：
2018-10-04 09:37:37
阅读次数：
325
和以往一样，本次项目也放到了 Github 中，欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定纵横比 5. REM + VW布局 6. 对比选择 方案选择 食用方式 一、前言 说到前端页面的布局 ...
分类：
移动开发 时间：
2018-09-15 00:43:40
阅读次数：
323
