还在用rem做移动端适配?最新移动端适配方案vw,vh了解一下!

vw,vh都是相对于屏幕视口的单位。

vw:相对于视口的宽度。视口被均分为100单位的vw;

vh:相对于视口的高度。视口被均分为100单位的vh;

vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;

vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;

解释完相关观念,下面就来说说具体的适配方案:

一般UI给的设计稿都是采用750X1334的,因此可以使用sass来编写一个函数:

1 $containerWidth: 750;
2 $containerHeight: 1334;
3 @function vieX($px) {
4 @return $px*100/$containerWidth * 1vw;
5 }
6 @function vieY($px) {
7 @return $px*100/$containerHeight * 1vh;
8 }

函数设置好,下来就简单了,在进行网页布局,css大小设置的时候,设计稿上数字是多少,这里就写多少,比如:

1 .header {
2 position: relative;
3 width: vieX(750);
4 height: vieY(400);
5 background-image: url(../assets/self/1126215672.jpg);
6 background-size: vieX(750) vieY(400);
7 position: relative;
8 }

再打开浏览器去看,发现布局大小,不管在手机还是平板都是适配的。

 

原文地址:https://www.cnblogs.com/lianyujie/p/9059868.html

时间: 2024-11-06 23:29:21

还在用rem做移动端适配?最新移动端适配方案vw,vh了解一下!的相关文章

PC端网页和移动端网页,自己做的总结

1.PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化. 2.在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件. 另外包括移动端弹出的手机键盘的处理,这样的问题在PC端都是遇不到的. 3.在布局上,移动端开发一般是要做到布局自适应的,需要熟练使用rem布局,还有百分比流式布局. 4.在动画处

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案. 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值:根据页面的dpr动态改变 Rem的取值: 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px(会被重置为12px) 固定设计稿的宽度开发

用nodejs把目录下所有用px做单位的css文件转化为用rem做单位的css文件

20171105 1211/星期日 公司为了更好适配手机端,以前用px做单位的css文件,全部需要转化为用rem做单位,目前是1rem=37.5px;开发新项目时,还是用习惯的px写样式代码,完成UI稿的还原后,再统一转化为用rem做单位,贴上我写的nodejs 代码: var fs = require('fs');var path=require('path'); console.log((__dirname))var oldContent='./px/';var newContent='./

前端里移动端到底比pc端多哪些知识?

前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧. 首先来看看PC端和移动端在前端开发上的一些区别: (1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化: (2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一些规律要多摸索一下,

Web端测试和移动端测试的区别

之前参加的项目有涉及Web端测试和移动端测试,简单的记录下他们之间的区别: 1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来重点标记. 对于移动端设备可以用手机自带的截图工具来截图然后传到电脑上,个人一般习惯安装微信的windows版本,通过文件传输助手发送到PC端.还有一种比较便捷的方式,将手机用数据线连接到电脑,本地配置android的运行环境,下载asm.jar,在cmd运行java -jar asm.jar,即可实时

iOS:界面适配--iPhone不同机型适配 6/6plus

iOS:界面适配--iPhone不同机型适配 6/6plus        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的比例值,如果ppi不变,则坐标和像素的比例不会变: iPhone 4以前 iPhone.iPhone3/3G机型未采用retina,坐标是320 x 480,屏幕像素320 x 480 ,他们一一对应,1:1关系.即一个坐标对应1个像素.

iOS:界面适配(三)--iPhone不同机型或设备不同尺寸适配(屏幕适配)和系统适配

对于不同苹果设备,各个参数查看<iOS:机型参数.sdk.xcode各版本>.        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的比例值,如果ppi不变,则坐标和像素的比例不会变: iPhone 4以前 iPhone.iPhone3/3G机型未采用retina,坐标是320 x 480,屏幕像素320 x 480 ,他们一一对应,1:1关系.即一

移动端页面对PC端排名的影响

Google关于移动端页面对PC端排名的影响"移动优先索引",Google是搜索引擎的大佬,Google以后会以移动版页面为搜索排名的判断基础,目前正处于测试阶段. 之前笔者做过测试,在百度搜索中,"重庆SEO"这个关键词,本站移动端排名比移动端排名要好得多,按照百度模仿Google的轨迹,以后也有可能做这样的调整,目前百度移动端的排名是参考PC端排名进行调整. 逛逛老外的网站(不一定要FQ)其实都非常的简洁,对国内许多"码农"来说,是值得学习的

手游页游和端游的服务端的架构与区别

转自:http://www.gameres.com/336666.html 手游页游和端游的服务端本质上没区别,区别的是游戏类型. 类型1:卡牌.跑酷等弱交互服务端 卡牌跑酷类因为交互弱,玩家和玩家之间不需要实时面对面PK,打一下对方的离线数据,计算下排行榜,买卖下道具即可,所以实现往往使用简单的 HTTP服务器: 登录时可以使用非对称加密(RSA, DH),服务器根据客户端uid,当前时间戳还有服务端私钥,计算哈希得到的加密 key 并发送给客户端.之后双方都用 HTTP通信,并用那个key进