随着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单位的移动端的适配的更多相关文章

  1. 关于使用vw单位适配H5项目(二)

    一些比较小的H5页面,我觉得全没有必要一定要使用框架的,比如vue和react之类的,我觉得原生的js,html5也可以写好移动端. 最近刚好要赶10多个h5页面,适配移动端的,各种手机型号都要适配, ...

  2. px,em,rem,vw单位在网页和移动端的应用

    px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...

  3. webpack的像素转vw单位的loader插件

    安装: npm i px2vw-view-loader 配置: 按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目 module: { rules: [{ ...

  4. 【前端适配】vw单位移动端适配方案

    近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...

  5. postcss gulp 安装使用

    备注:    测试使用的是gulp 进行的编译 1. 项目初始化 npm init mkdir src touch app.css body{ display: flex; } 2. 安装(gulp ...

  6. vw单位相关

    1.相对于视口的宽度.视口被均分为100单位的vw h1 { font-size: 8vw; } 如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100 2.相 ...

  7. 解决uc浏览器不支持vw单位的方法

    插入下段代码,使用rem来代替vw <script type="text/javascript"> (function (doc, win) { var docEl = ...

  8. 认识 vh 和 vw 单位

    1. 页面 html 结构 <header> <h1>欢迎来到米修在线</h1> <p>Lorem ipsum dolor sit amet conse ...

  9. 基于react/vue的移动端终极适配方案vw单位(更新css-modules配置)

    传送门:  https://segmentfault.com/a/1190000014185590

随机推荐

  1. ceph学习

    网络: ceph必须要有公共网络和集群网络: public network:负责客户端交互以及osd与mon之间的通讯 cluster network:负责osd之间的复制,均衡,回填,数据恢复等操作 ...

  2. LInux下设置账号有效时间 以及 修改用户名(同时修改用户组名和家目录)

    在linux系统中,默认创建的用户的有效期限都是永久的,但有时候,我们需要对某些用户的有效期限做个限定!比如:公司给客户开的ftp账号,用于客户下载新闻稿件的.这个账号是有时间限制的,因为是付费的.合 ...

  3. Nginx反向代理的简单实现

    1)nginx的反向代理:proxy_pass2)nginx的负载均衡:upstream 下面是nginx的反向代理和负载均衡的实例: 负载机:A机器:103.110.186.8/192.168.1. ...

  4. ecna2017-Sheba’s Amoebas

    很简单的深搜的一道题,由于这道题要找环的个数,并且认为相连当一个点的8个方向种中有一个方向和这个点相连. 这个题做法无非就是暴力每个点,然后满足条件的深搜即可. 感觉我自己的代码写的很无趣,大佬的代码 ...

  5. ecna2017-Game of Throwns

    这题就是给你一个标号为0-n-1的环,然后给你M个操作,操作有两种,一种是直接给一个数,这数的正负代表我当前向前(向后)仍了xx个位置的球,或者给你一个撤销操作表示为 undo m,表示撤销最近的M个 ...

  6. 先埋锅-CF-Valid BFS?-差一点没交上

    #include<iostream> #include<stdio.h> #include<string.h> #include<algorithm> ...

  7. Linux环境C程序设计

    Linux基础 常用shell命令 命令 说明 命令 说明 man 查看联机帮助 ls 查看目录及文件列表 cp 复制目录或文件 mv 移动目录或文件 cd 改变文件或目录 rm 删除文件或目录 mk ...

  8. 关于RESTful 的概念

    1.REST 是面向资源的,这个概念非常重要,而资源是通过 URI 进行暴露.URI 的设计只要负责把资源通过合理方式暴露出来就可以了.对资源的操作与它无关,操作是通过 HTTP动词来体现,所以RES ...

  9. nodejs框架对比

    最近想实操nodejs,在选择框架的时候,查阅后大致整理为如下表格内容. 此处列举下才开始使用eggjs框架: 1.其基于koa开发: 2.若为企业级项目,用其脚手架egg-inint搭建会快很多,后 ...

  10. WIN10护眼色

    参看文章:http://www.xitongcheng.com/jiaocheng/win10_article_10326.html WIN10:[HKEY_CURRENT_USER\Control ...