vw 前端_理解前端尺寸vw、vh、rem、em
之前,一直没有对这几个尺寸实战过,也主要从事与pc端的开发工作,再加上对技术的关注点一直在js上,忽略了css方面的知识。今天呢?在各个大牛blog基础之上,对前端尺寸进行一一讲解。希望能加深自己对其的理解、也能帮助那些想要理解这些知识的爱好者。
em
em 是一个相对长度单位。其相对于当前对象内文本的字体尺寸,。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。em的值并不是固定的
em会继承父级元素的字体大小
其中,浏览器默认尺寸是16px,故body中的font-size: 16 * 62.5%=10px,而#app继承与父级元素10px * 1.2 = 12px,#footer继承与body 10px2=20px;而#app p继承与#app,此时1em=12px,故#app p中的font-size为12px1.2=14.4px
运行js
document.body.style.fontSize='20px';
我们可以看到,网页中所有采用em单位,由于body font-size设置为20px,其他均等比例的扩大
由此得出结论我们可以通过设置一个父级元素如html、body font-size,作为整体默认尺寸,通过运行js脚本动态修改font-size实现适配
其适配方案依旧是依据像素点来适配
需要通过注入脚本实现
所有子元素的宽度、高度、font-size等尺寸,均继承与父元素,故增加了我们的计算成本
rem
rem全名root em,简写rem,故其也是一个相对长度单位,但只相对于根元素,可以简单的通过更改根元素大小,从而调整所有字体大小。只相对于根元素(html)
通过修改根元素可成比例的调整页面字体大小
其适配方案通过js脚本设置像素点来实现
其与em的基本用法是一致的,唯独不一致的是,所有元素都是相对于根元素,而不是父级元素,减少了我们的计算成本
例子
通过注入js
document.documentElement.style.fontSize='20px'
总结:用rem,不用em,尺寸清晰,易于维护
由于rem是root em,故其与em兼容性是一致的
均是基于像素点适配
移动端使用方案
在移动端适配方案中,使用rem时,通常与scss、less、postcss等预编译器相结合,通过定义一些函数,或者使用一些插件、使我们在开发时,依旧使用px,即设计师给我们的设计稿像素点,通过预编译期将其编译成rem单位。从而实现适配
vw、vh
vw(Viewport Width)、vh(Viewport Height)是基于视图窗口的单位,是css3的一部分,基于视图窗口的单位,除了vw、vh还有vmin、vmax。vw:1vw 等于视口宽度的1%
Vh:1vh 等于视口高度的1%
vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时,1vmin=1vw
vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时,1vmax=1vh
Note: IE9 uses vm instead of vmin. It does not support vmax.
由于使用vw、vh依赖于视图窗口,故当屏幕分辨率变大或者缩小,尺寸会进行相应的放大或者缩小,当页面足够大,或者足够小时,尺寸会变得很大或者很小,从而导致用户体验差,当然谁会用那么大或者那么小的设备呢?大多数情况下,其实可以忽略不计的,如果你是一个最求完美用户体验的人,可通过rem,对根元素设置最大最小值,配合body加上最大宽度和最小宽度
// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw;
// 同时,通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
max-width: 540px;
min-width: 320px;
}
移动端使用方案
在移动端适配方案中,我们可以通过与less、scss、postcss等预编译期相结合,通过定义一些函数或者使用一些插件,根据设计稿,定一个基准尺寸,根据这个尺寸,计算出相对应的vh、vw元素块大小。从而做到自适应适配。https://zhuanlan.zhihu.com/p/36913200
vw 前端_理解前端尺寸vw、vh、rem、em相关推荐
- vw 前端_【前端适配】vw+rem自适应适配方案
先说好处:无需借助js,只用css就可以实现一定屏宽范围内元素大小随屏幕宽度改变平稳变化. 再说用法: 第一步:元素大小单位选用rem. 第二步:根据设计稿的屏幕宽度设置html的font-size大 ...
- 开发web前端_移动前端开发和web前端开发的区别?
如果说非要有区别的话应该就是开发的软件和方式不同,因为他们本来就不属于一端的东西,具体来看看下面: web前端开发 用最简单粗暴的方式来讲,就是用html + css + javascript来构建一 ...
- 乾坤 微前端_微前端架构初探以及我的前端技术盘点
前言 最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用.各个子应用可以独立运 ...
- qiankun 微前端_微前端方案 qiankun(实践及总结)
❝ 作者:沉末_ 链接:https://juejin.im/post/5ed73b73e51d4578724e3fa4 ❞ 什么是微前端? 我们先来看两个实际的场景: 1. 复用别的的项目页面 通常, ...
- xlsx模块 前端_纯前端利用 js-xlsx 之单元格样式(4)-阿里云开发者社区
0.单元格样式: 样式属性 子属性 取值 fill patternType "solid" or "none" fgColor COLOR_SPEC bgCol ...
- 字节青训前端笔记 | 理解CSS
CSS 作为前端技术栈中关键一环,对页面元素及样式呈现起到了直接作用.本节课旨在通过对 CSS 的工作流程及原理.页面中 CSS 使用方法等详细解读,帮助前端新手建立对 CSS 的全面而深刻的认知. ...
- 前端分离的前端开发工具_使我成为前端开发人员工作的工具和资源
前端分离的前端开发工具 Learning front-end development can be a bit overwhelming at times. There are so many res ...
- web前端网页设计作业_网页前端设计快速入门技巧
我最近收到部分在校学生的邮件,很多在临近毕业实习这段时间,面临着找工作,表示压力非常大,也不知道如何去选择,大多数都是处于迷茫期,问我怎么办?也有想学前端的,问我怎么才能够快速的入门? 先说我自己吧, ...
- py获取前端的参数_微前端 qiankun 项目实践
(给前端大全加星标,提升前端技能) 作者:zxh1307 https://juejin.im/post/5ea55417e51d4546e347fda9 导语 最近在做微前端的项目 , 过程中真是踩了 ...
最新文章
- python sys.argv是什么?
- DatePicker的使用(一)
- POJ-1321-棋盘问题(深搜)
- 第八周项目实践6 KMP算法(串的模式匹配)
- 使用Heroku,解决gitment登录失败,报[object ProgressEvent]的错
- ubuntu18.10安装linuxqq2.0
- 《MySQL必知必会》[01] 基本查询
- 技术差的程序员,90%都输在这点上!骨灰级开发:其实都是在瞎努力!
- 嵌入式系统实时仿真解决方案SkyEye
- 字符串:2.BF算法(普通模式匹配算法)
- 【优化调度】基于matlab一致性算法求解电力系统分布式经济调度优化问题【含Matlab源码 770期】
- python 音频格式转换
- php计算器源码,php 简单计算器
- codesys工控机_CODESYS在系统集成项目中的运用案例
- 戴尔win10新电脑装linux,如何给戴尔新机装系统win10
- zabbix 监控过程详解
- 苹果开发者账号续费时出现你的支付授权失败,请核对信息并重试..
- 内存耗尽后Redis会发生什么
- 2022-02-18 Android app 二维码扫描demo,用zxing库,实测ok,记录一下所参考有价值的文章,有生成二维码的demo,但没有亲测。
- HDFS小文件的危害
热门文章
- 微信小程序实现城市选择效果(超详细)
- 一个简单的shell脚本--判断网段主机IP存活情况
- 果链“围城”:傍上苹果,是一场甜蜜与苦楚交错的旅途
- 杜比真实环绕 还原影院视听,飞利浦杜比全景声回音壁B8967臻情上市
- InDesign插件--常规功能开发--版面调整--js脚本开发--ID插件
- 《鸟哥的Linux私房菜》学习笔记
- 2017GYL创业营暨青年大会全球招募中
- Bootstrap下拉菜单(Dropdown)插件实现隐藏操作按钮的简单实现
- 尚品汇_第4章_ 商品spu保存
- SQL Saturday活动再起