vw实现移动端自适应页面

一、设备支持情况

测试网站：https://caniuse.com/#search=vw

css3test：https://airen.github.io/css3test/，https://github.com/airen/css3test

1、PC端

2、mobile端

二、vw的不足

1、vw和px混用时会溢出

当容器使用vw单位，margin采用px单位时，很容易造成整体宽度超过100vw，从而影响布局效果。对于类似这样的现象，我们可以采用相关的技术进行规避。比如将margin换成padding，并且配合box-sizing。只不过这不是最佳方案，随着将来浏览器或者应用自身的Webview对calc()函数的支持之后，碰到vw和px混合使用的时候，可以结合calc()函数一起使用，这样就可以完美的解决。

2、有些机型不支持

可以采用csspolyfill进行降级处理，推荐Viewport Units Buggyfill

三、vw需知

vw是基于Viewport视窗的长度单位，视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是window.innerWidth/window.innerHeight的大小。

在CSS Values and Units Module Level 3中和Viewport相关的单位有四个，分别为vw、vh、vmin和vmax。

1、vw

是Viewport's width的简写,1vw等于window.innerWidth的1%；
2、vh

是Viewport's height的简写，1vh等于window.innerHeihgt的1%；
3、vmin

vmin的值是当前vw和vh中较小的值；
4、vmax

vmax的值是当前vw和vh中较大的值；
5、计算

100vw = 750px，即1vw = 7.5px。

四、vw的使用

1、把px转化为vw，vh
在代码中写px，借助插件postcss-px-to-viewport转化为vw。
安装后，进行参数配置

"postcss-px-to-viewport": { viewportWidth: 750, viewportHeight: 1334, unitPrecision: 5, viewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false
}

2、容器的长宽比缩放
推荐插件postcss-aspect-ratio-mini。安装后，直接使用如下，不用配置。

.aspect-box {position: relative;
}.aspect-box {aspect-ratio: '16:9';
}

会看到编译结果

.aspect-box {position: relative;
}.aspect-box:before {padding-top: 56.25%;
}

3、1px的处理方案
安装postcss-write-svg插件。
方案A、border-image

@svg 1px-border {height: 2px;@rect {fill: var(--color, black);width: 100%;height: 50%;}
}
.example {border: 1px solid transparent;border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

会看到编译结果

.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}

方案B、background-image

@svg square { @rect { fill: var(--color, black); width: 100%; height: 100%; }
}
#example { background: white svg(square param(--color #00b1ff));
}

会看到编译结果

#example { background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

转载于:https://www.cnblogs.com/camille666/p/vw_autoadapt.html

vw实现移动端自适应页面相关推荐

js页面自适应屏幕大小_移动端自适应布局方法的calc()与vw
前端人员在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不 ...
layui弹窗ifarme引入自适应页面（vw）样式缩小
问题描述及分析:layui弹窗的宽高不是铺满屏幕的,是在屏幕中间,而做了自适应的页面采用是vw单位,正常情况是自适应的页面的宽根据浏览器窗口的宽度自适应,但是应为layui弹窗的ifame是设置了固定 ...
移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...
使用vw做移动端页面的适配
Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...
移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
移动端Web页面适配方案（整理版）
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计] 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需 ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
[css] 移动端微信页面有哪些兼容性问题及解决方案是什么？
[css] 移动端微信页面有哪些兼容性问题及解决方案是什么? 1.rem方案通过reset js进行适配 2.vw 方案搭配px to viewport进行适配个人简介我是歌谣,欢迎和大家一起交 ...
PHP钥匙导航源码-社区导航双端自适应Typecho模板
简介: PHP源码-钥匙导航社区导航双端自适应Typecho模板功能介绍: 自动收录,自定义排序,自定义颜色,批量检测广告: txt 里面的内容可以放到usr\themes\flkc\index.P ...

vw实现移动端自适应页面

vw实现移动端自适应页面相关推荐

最新文章

热门文章