http://www.w3chtml.com/css3/units/length/vh.html https://www.html.cn/book/css/values/length/vh.htm ...
分类：
Web程序 时间：
2019-09-21 10:49:42
阅读次数：
88
我们做移动端项目的时候需要安装如下的插件； postcss-import postcss-url autoprefixer 这个不用安装，Vue-cli 已经集成进去了 postcss-aspect-ratio-mini postcss-cssnext postcss-px-to-viewport ...
分类：
移动开发 时间：
2019-08-17 23:51:28
阅读次数：
172
1. 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 2. 视口单位vw，vh 视口单位中的“视口”，桌面端指的是浏览器 ...
分类：
Web程序 时间：
2019-08-10 17:37:18
阅读次数：
123
px(pixels) 像素 (px) 是一种绝对单位，因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。 px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。 (有一种特殊情况，修改屏幕分辨率，px也会随 ...
分类：
Web程序 时间：
2019-08-09 13:51:44
阅读次数：
116
vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。 vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽 ...
分类：
Web程序 时间：
2019-08-06 21:21:49
阅读次数：
161
现在移动端 web 开发越来越靠近 app 的功能。所以两列布局各自都能实现独立滚动也常见。基于固定侧边栏导航，另一侧实现内容展示。 这个功能的核心在于使用 vh 单位。 其中 CSS 的代码是核心点，代码如下： ...
分类：
其他好文 时间：
2019-07-06 00:16:43
阅读次数：
84
vh、vw、vmin、vmax介绍 vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）vh：视窗高度的百分比vmin：当前 vw 和 vh 中较小的一个值vmax：当前 vw 和 vh 中较大的一个值 浏览器兼容性 （1）桌面 PC Chrome：自 26 版起就完美支持（2013年2月）Fi ...
分类：
Web程序 时间：
2019-06-16 12:05:10
阅读次数：
134
布局方案： 方案一：100%布局（高度固定，宽度自适应）（流式布局） 1、控件弹性 2、图片等比例 3、文字流式 特点：手机越大，显示内容越多 方案二：REM布局（等比缩放布局，整个页面等比例缩放） vw、vh单位：1vw、vh等于当前屏幕宽度、高度（逻辑宽度，window.innerWidth）的 ...
分类：
移动开发 时间：
2019-06-03 12:48:15
阅读次数：
119
css常见单位 em : 相对于父元素的字体大小，若父元素fon-size为16px,那么1em就为16px rem: 相对于根元素字体大小，若根元素font-size为16px,那么1em就为16px vw : 相对于视窗的宽度：视窗宽度是100vw vh : 相对于视窗的高度：视窗高度是100v ...
分类：
Web程序 时间：
2019-05-25 17:00:32
阅读次数：
146
1、页面布局： 由于手机型号多样导致页面高宽比非常多，在制作上会有出现不同手机在同一套css下面显示效果不尽如人意，所以需要进行兼容性处理。 方式很多比如直接套用类似bootstrap类的框架，可以使用rem等相对单位。这里我主要使用的是媒体查询和vw和vh单位和百分比来进行处理。 100vw为整个 ...
分类：
移动开发 时间：
2019-05-21 13:15:12
阅读次数：
154
