移动端开发vw+rem布局,即等比缩放布局(什么是vw?如何设置根元素html的字体大小?如何换算vw单位?文末:移动端开发步骤详解链接)
1 什么是vw?
vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。能够实现页面内的字体大小跟随视口的大小而改变。
1vw 视口宽度的1%
100vw 视口宽度的100%
1vh 视口高度的1%
100vh 视口高度的100%
2 为什么要将根元素html字体大小设置为100px?
是为了方便计算。
我们都知道,根元素默认的字体大小是12px,即 html{font-size:12px;}
那在默认的情况下,如果我们在二倍图的设计稿上量取的是88px,除以2,就为44px,再除以12,会得到除不尽的小数。而且除以12不好计算。
但是可能有人会觉得除以10也好计算,为什么不取10呢?原因是12px已经是font-size的最小值了。
所以除以100是比较合适的,因为只需要小数点向前移动两位。
html{ font-size:100px; }
3 如何把100px换算成vw?(根据设计稿机型换算vw)
根据设计稿的手机型号来进行换算。
如何判断UI给的二倍图的设计稿是什么手机型号呢?
例子: 用ps之类的软件打开UI给的二倍图的设计稿,如果测量得到的是750px,除以2后就是 375px,即该设计稿的机型是iPhone6。
现在我们知道的设计稿是什么机型,那就可以开始换算vw单位了。
- 根据设计稿iphone5:320px=100vw
根元素最终设置为:html{font-size:31.25vw;}
换算演示: 1px=100vw/320px=0.3125vw 100px=31.25vw 这样就完成了100px换算成对应屏幕大小的单位为vw的数值。iphone6的vw换算也是同理。
- 根据设计稿iphone6:375px=100vw(现在大部分的设计稿是iphone6)
根元素最终设置为:html{font-size:26.67vw;}
移动端开发步骤详解:https://blog.csdn.net/m0_59850169/article/details/119388317
关于什么是vw的更详细说明:https://blog.csdn.net/weixin_39860108/article/details/111808198
移动端开发vw+rem布局,即等比缩放布局(什么是vw?如何设置根元素html的字体大小?如何换算vw单位?文末:移动端开发步骤详解链接)相关推荐
- 字体怎么转换html代码,如何设置下列html代码的字体大小和 font-family 以进行水平转换?_html_开发99编程知识库...
@CodeUniquely 我最终改变了水平滚动的结构,是的,我只是使用生成的图像作为占位符. 以下是我所做的: content content content 还有 CSS:.scroll { ba ...
- html设置根rem,经过js动态设置根元素的rem方案
rem目前是响应式开发移动端一个很重要也是经常使用的一个元素,可是在网上看的各类文章都会超级懵逼.因此我在下面给出两个方案,也列举出使用方法,让你们一目了然.前提是设计稿以750为准.其中测试的设计稿 ...
- oracle改字体大小_集成开发环境PL/SQL Developer教程:设置行号和修改字体大小
PL/SQL Developer是一个集成开发环境,它专门针对Oracle数据库的存储程序单元的开发所用.PL/SQL开发者在开发Oracle应用程序的时候注重于开发工具简单易用,代码简洁和开发效率高 ...
- 移动布局+百分比布局+em+rem+动态设置根元素fontSize
流式布局 移动端大量使用CSS3盒子模型 box-sizing box-sizing: border-box; 很重要 移动端特殊样式 如何动态设置html的 font-size 开始 js动态设置代 ...
- 字体大小高度html vw,字体大小自适应纯css解决方案【转】
viewpo遇新是直朋能到分览int css3提供了一些与当前viewpo遇新是直朋能到分览int相关的元素,vw,vh,vim等. "viewpo遇新是直朋能到分览int" = ...
- H5移动端适配方案rem/vw
前言 在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
- jpanel网格布局添加滚动条_啥是前端开发工程师必会的5种网页布局方式?
作为前端开发工程师,布局方式有多种,针对不同的情况有不一样的处理,但是很多初学的同学都不知道这些情况,那么我们今天就来说说,那些前端开发工程师不可不知的5种布局方式! 一.静态布局(static la ...
- 啥是前端开发工程师必会的5种网页布局方法?
作为前端开发工程师,布局方式有多种,针对不同的情况有不一样的处理,但是很多初学的同学都不知道这些情况,那么我们今天就来说说,那些前端开发工程师不可不知的5种布局方式! 一.静态布局(static la ...
- web前端开发工程师必会的5种网页布局方法?
作为前端开发工程师,布局方式有多种,针对不同的情况有不一样的处理,但是很多初学的同学都不知道这些情况,那么我们今天就来说说,那些前端开发工程师不可不知的5种布局方式! 一.静态布局(static la ...
- 固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳
关于web页面布局,首先简单了解一下固定布局(fixed layout).流体布局(fluid layout).弹性布局(elastic layout).响应布局(responsive layout) ...
最新文章
- centos 安装 mysql 5.7
- tensorflow tuner 调参,示例代码(jupyter notebook 版)
- oracle显示多表数据,Oracle DB 使用连接显示多个表中的数据
- kettle环境变量/kettle.properties的配置问题
- C语言宏定义中使用 do{}while(0) 的情形
- Vs2010与VC的区别
- C++类、函数、指针
- Python中span()函数的作用
- 如何避免核心代码资源泄漏和如何提高开发效率
- Java 复习笔记 线程Thread
- 如何给一个文件重命名?
- Java第十九天(字节流和字符流转换、打印流、Properties类)
- 学习自动驾驶的路径是什么?这份技能图谱告诉你
- ANSYS ICEM CFD 网格划分步骤简要总结
- 计算机英语词汇的特点,计算机专业英语词汇特点.ppt
- 微信小程序 13 排行榜的编写
- java漫画pdf_Java并发编程学习宝典(漫画版)(PDF+HTML完结)
- 计算机会考题 荷花,小小量词我来填。一()车厢一()纠纷一()荷花一()谜语一()考试一()皮球...
- FSAF:Feature Selective Anchor-Free Module for Single-Shot Object Detection笔记
- WebApi 路由机制剖析