和我一起使用postcss+gulp进行vw单位的移动端的适配
随着iphoneX的出现,新的一轮适配大法应该又出现了吧?不论是使用flex布局或者媒体查询,好似都不能完全解决新加的刘海带来的适配问题。
但是有一个单位vw就神奇的解决了这个问题。vw和vh是相对于视口(viewport)的宽度和高度 ,1vw等于视口宽度(viewport width)的百分之一,也就是说100vw就是视口的宽度;
1vh等于视口高度(viewport height)的百分之一。做移动端适配的时候,试想想,也就是将手机的视口进行高密度的细分,随着屏幕的改变,1vw所代表的视口大小也改变,不是可以解决随着屏幕
改变字体随着改变的问题了嘛?
如何使用vw这个单位呢?我们可以通过px单位进行转换呀!
之前做过一个项目要求完全适配所有移动端,这个时候,flex布局大法是解决不了所有手机的问题的。唯有vw出马,才能够一个顶两。
我写页面直接使用的就是px单位,给大家看看它在浏览器中转换的的值吧~虽然单位使用的是px,在浏览器中转换的却是vw。

在px转换成vw的过程中,什么是最大的功臣呢?当然就是我们的postcss啦!
postcss是强大的css预处理工具,有兴趣的童鞋,建议你们看看《深入postcssweb设计》,这本书里面对postcss进行了详细的讲解。
我写css总是喜欢写飞快,基本上是不动脑筋那就是最好的了,所以呀,不论怎么样,我第一件事情,就是要集成SCSS的呀。
接下来祭出我使用的postcss与gulp结合使用vw适配移动端的方法吧。


我的
这个里面还是有一些小坑的。
你们要记得注意踩呀。
下面是我借鉴过的博客,没有这些博客的指引,我想,我可能不能使用postcss+gulp进行vw单位的移动端适配。
借鉴博客1https://www.jianshu.com/p/06d40d38cc06
借鉴博客2https://github.com/postcss/gulp-postcss
借鉴博客3https://segmentfault.com/a/1190000003909268
借鉴博客4http://ju.outofmemory.cn/entry/341641
借鉴博客5https://www.w3cplus.com/css/vw-for-layout.html
借鉴博客6http://hao.jobbole.com/postcss/
借鉴博客7https://segmentfault.com/a/1190000014185590
借鉴博客8https://www.w3cplus.com/css/aspect-ratio-boxes.html
借鉴博客9https://segmentfault.com/q/1010000011608582
借鉴博客10https://www.cnblogs.com/zy20160429/p/8205025.html
借鉴博客11https://blog.csdn.net/xuyunfei_2012/article/details/52847988
借鉴博客12https://blog.csdn.net/m0_37978717/article/details/73606499
借鉴博客13https://www.npmjs.com/package/gulp-sourcemaps
借鉴博客14https://www.cnblogs.com/Darren_code/p/gulp.html
借鉴博客15http://www.css88.com/archives/7317
借鉴博客16https://segmentfault.com/q/1010000012184986
借鉴博客17https://www.npmjs.com/package/gulp-cssnano
(另外,这篇博客我总结的太晚了,还有它存在很多问题的,比如没有集成js对吧。我想将webpack也集成进去的,没有做这个事情,
真的非常抱歉,博客并没有写的非常详细,主要是我最近有些恹恹的。希望快快打起精神,好好加油吧)
和我一起使用postcss+gulp进行vw单位的移动端的适配的更多相关文章
- 关于使用vw单位适配H5项目(二)
一些比较小的H5页面,我觉得全没有必要一定要使用框架的,比如vue和react之类的,我觉得原生的js,html5也可以写好移动端. 最近刚好要赶10多个h5页面,适配移动端的,各种手机型号都要适配, ...
- px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
- webpack的像素转vw单位的loader插件
安装: npm i px2vw-view-loader 配置: 按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目 module: { rules: [{ ...
- 【前端适配】vw单位移动端适配方案
近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...
- postcss gulp 安装使用
备注: 测试使用的是gulp 进行的编译 1. 项目初始化 npm init mkdir src touch app.css body{ display: flex; } 2. 安装(gulp ...
- vw单位相关
1.相对于视口的宽度.视口被均分为100单位的vw h1 { font-size: 8vw; } 如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100 2.相 ...
- 解决uc浏览器不支持vw单位的方法
插入下段代码,使用rem来代替vw <script type="text/javascript"> (function (doc, win) { var docEl = ...
- 认识 vh 和 vw 单位
1. 页面 html 结构 <header> <h1>欢迎来到米修在线</h1> <p>Lorem ipsum dolor sit amet conse ...
- 基于react/vue的移动端终极适配方案vw单位(更新css-modules配置)
传送门: https://segmentfault.com/a/1190000014185590
随机推荐
- ceph学习
网络: ceph必须要有公共网络和集群网络: public network:负责客户端交互以及osd与mon之间的通讯 cluster network:负责osd之间的复制,均衡,回填,数据恢复等操作 ...
- LInux下设置账号有效时间 以及 修改用户名(同时修改用户组名和家目录)
在linux系统中,默认创建的用户的有效期限都是永久的,但有时候,我们需要对某些用户的有效期限做个限定!比如:公司给客户开的ftp账号,用于客户下载新闻稿件的.这个账号是有时间限制的,因为是付费的.合 ...
- Nginx反向代理的简单实现
1)nginx的反向代理:proxy_pass2)nginx的负载均衡:upstream 下面是nginx的反向代理和负载均衡的实例: 负载机:A机器:103.110.186.8/192.168.1. ...
- ecna2017-Sheba’s Amoebas
很简单的深搜的一道题,由于这道题要找环的个数,并且认为相连当一个点的8个方向种中有一个方向和这个点相连. 这个题做法无非就是暴力每个点,然后满足条件的深搜即可. 感觉我自己的代码写的很无趣,大佬的代码 ...
- ecna2017-Game of Throwns
这题就是给你一个标号为0-n-1的环,然后给你M个操作,操作有两种,一种是直接给一个数,这数的正负代表我当前向前(向后)仍了xx个位置的球,或者给你一个撤销操作表示为 undo m,表示撤销最近的M个 ...
- 先埋锅-CF-Valid BFS?-差一点没交上
#include<iostream> #include<stdio.h> #include<string.h> #include<algorithm> ...
- Linux环境C程序设计
Linux基础 常用shell命令 命令 说明 命令 说明 man 查看联机帮助 ls 查看目录及文件列表 cp 复制目录或文件 mv 移动目录或文件 cd 改变文件或目录 rm 删除文件或目录 mk ...
- 关于RESTful 的概念
1.REST 是面向资源的,这个概念非常重要,而资源是通过 URI 进行暴露.URI 的设计只要负责把资源通过合理方式暴露出来就可以了.对资源的操作与它无关,操作是通过 HTTP动词来体现,所以RES ...
- nodejs框架对比
最近想实操nodejs,在选择框架的时候,查阅后大致整理为如下表格内容. 此处列举下才开始使用eggjs框架: 1.其基于koa开发: 2.若为企业级项目,用其脚手架egg-inint搭建会快很多,后 ...
- WIN10护眼色
参看文章:http://www.xitongcheng.com/jiaocheng/win10_article_10326.html WIN10:[HKEY_CURRENT_USER\Control ...