【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案

栏目: Html · 发布时间: 6年前

内容简介:一篇真正看了就会用的vw、wh适配教程从古老的的百分比布局+px+媒体查询到rem布局,一直没找到心仪的移动端适配方案。网上搜索的教程质量也是参差不齐(要么配置过于繁琐,要么一篇文章到处抄袭),反正我看完了总有一种无从下手的无奈。所幸,经同事推荐找到一款完美的插件。欣喜之余,以作记录。同时希望能给需要的朋友提供帮助。这里不多介绍vw、vh属性,毕竟网上一搜一大把,本文章只有最纯粹的干货。只需要通过包管理工具安装postcss-px-to-viewport插件后进行简单配置就可以在页面直接使用px单位,项目编

一篇真正看了就会用的vw、wh适配教程

从古老的的百分比布局+px+媒体查询到rem布局,一直没找到心仪的移动端适配方案。网上搜索的教程质量也是参差不齐(要么配置过于繁琐,要么一篇文章到处抄袭),反正我看完了总有一种无从下手的无奈。所幸,经同事推荐找到一款完美的插件。欣喜之余,以作记录。同时希望能给需要的朋友提供帮助。

移动端适配神器——postcss-px-to-viewport

这里不多介绍vw、vh属性,毕竟网上一搜一大把,本文章只有最纯粹的干货。只需要通过包管理 工具 安装postcss-px-to-viewport插件后进行简单配置就可以在页面直接使用px单位,项目编译后自动转换为对应的vw或vh属性

px转vw、vh

1. 在Github搜索 postcss-px-to-viewport

选择星星最多的

【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案

英语渣表示看到有中文文档很是兴奋

【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案

2. 安装插件

npm install postcss-px-to-viewport --save-dev
复制代码

3. 配置参数

【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案

这里以vue cli3.x版本做参考,在package.json中配置

【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案

以上,现在代码中使用px就能直接转为对应的vw、vh属性了

通过媒体查询处理边界情况

一般来说使用px转为vw、vh就可以应付99%的移动端适配了,但偶尔会有个别情况需要使用媒体查询适配小屏分辨率

比如以iphone6为基准布局,看起来毫无问题

【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案

但在如iphone5等320像素的分辨率下就会有些瑕疵

【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案

明显看到,字体重叠了。这时就可以请出法宝。用媒体查询解决

【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案

代码意思是,当用户手机分辨率(宽度)为320像素到340像素之间的时候做兼容处理,下面来看下处理后的效果

【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案

完美解决


以上所述就是小编给大家介绍的《【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构、算法与应用

数据结构、算法与应用

(美)Sartaj Sahni / 汪诗林、孙晓东、等 / 机械工业出版社 / 2000-01 / 49.00

本书是关于计算机科学与工程领域的基础性研究科目之一――数据结构与算法的专著。 本书在简要回顾了基本的C++ 程序设计概念的基础上,全面系统地介绍了队列、堆栈、树、图等基本数据结构,以及贪婪算法、分而治之算法、分枝定界算法等多种算法设计方法,为数据结构与算法的继续学习和研究奠定了一个坚实的基础。更为可贵的是,本书不仅仅介绍了理论知识,还提供了50多个应用实例及600多道练习题。 本书......一起来看看 《数据结构、算法与应用》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码