Java教程

移动端布局之vw,em,rem的用法总结以及响应式布局原理

本文主要是介绍移动端布局之vw,em,rem的用法总结以及响应式布局原理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

移动端布局之vw,em,rem的用法总结

**在这里插入图片描述
这是一个!+tab键生成的简单的html结构,而移动端最重要的就是这句话
***在这里插入图片描述
一键生成页面,基本上都会有这段声明,快捷键生成meta:vp_tab键也能生成,这段标签上面的viewport是屏幕窗口的意思,width=device-width中的width指的是虚拟窗口的宽度,device-width指的是实际窗口的宽度。
1.什么是em?
em是一种相对长度单位,相对于自身元素的字号大小,如果没有设置即参照父容器的字号大小或浏览器默认字号大小。
在这里插入图片描述
在这里插入图片描述
假设给这个元素设置了xem,那么它的实际大小就是父元素font-size大小的x倍。如果父元素没有设置font-size属性,那么它会跟随浏览器默认font-size大小的x倍。
在这里插入图片描述
在这里插入图片描述
它会选择离它最近的父元素的fon-size大小,并扩大x倍。如果自身已经设置了大小,会优先根据自身大小去扩大。
2.什么是rem?
rem是css3的新标准也是一种相对长度单位,其相对于HTML根标签的字号大小,如果根元素没有设置字体大小,就会跟随浏览器默认字体大小。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述在这里插入图片描述

为了便于计算,一般都是给html设置100px,那么你下面测量到的单位就应该除100,如果你的dpr值是2或者3,也应该相应的除2或者3,
什么是dpr呢?dpr,也被称为device pixel ratio,即物理像素与逻辑像素的比,就是物理像素、实际像素

3.什么是vw?
vw:相对于视图窗口的宽度,是一种视图单位
1vw等于视图窗口宽度的1%;
4.vw和rem的结合使用:

在这里插入图片描述

在这里插入图片描述
根据1vw等于视图窗口宽度的1%,那么,现在假设有一张750的设计稿,这是逻辑像素,它的物理像素是375px,1vw=375的1%,1vw=3.75px,之前我们为了计算方便,给根元素设置font-size:100px;把100px换算成vw也就是26.67vw(四舍五入的结果),就可以给html设置26.67vw,就相当于给html根元素设置100px,一样的效果。

响应式布局原理**

  1. 响应式布局的核心就是媒体查询
  2. 媒体查询也需要这段声明
    .在这里插入图片描述
    外联式媒体查询,根据宽度判断是否引入相应的css!在这里插入图片描述
    内嵌式媒体查询:
    在这里插入图片描述
    在这里插入图片描述
    min-width:最小宽度,意思是,800px以上,是绿色,max-width:最大宽度,意思是1000px以内,是红色
    语法:@media screen/print and 空格(一定要加)(max-width/min-width)
这篇关于移动端布局之vw,em,rem的用法总结以及响应式布局原理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!