前端常见长度单位

简介: 前端常见长度单位

像素

1.什么是像素(Pixel)?

在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素,例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格

2.像素特点

不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位)

百分比

1.什么是百分比?

百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算

例如父元素宽高都是200px, 设置子元素宽高是50%, 那么子元素宽高就是100px

2.百分比特点

2.1 子元素宽度是参考父元素宽度计算的

2.2子元素高度是参考父元素高度计算的

2.3子元素padding无论是水平还是垂直方向都是参考父元素宽度计算的

2.4子元素margin无论是水平还是垂直方向都是参考父元素宽度计算的

2.5不能用百分比设置元素的border

结论: 百分比是一个动态的单位, 会随着父元素宽高的变化而变化(相对单位)

em

  • 1.什么是em?
    em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位,例如font-size: 12px; ,那么1em就等于12px
  • 2.em特点
    2.1当前元素设置了字体大小, 那么就相对于当前元素的字体大小
    2.2当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
    2.3如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小
    结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)

rem

  • 1.什么是rem?
    rem就是root em, 和em是前端开发中的一个动态单位,
    rem和em的区别在于, rem是一个相对于根元素字体大小的单位,例如 根元素(html) font-size: 12px; ,那么1em就等于12px
  • 2.rem特点
    2.1除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸
    2.2如果根元素设置了字体大小, 那么就相对于根元素的字体大小
    2.3如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小
    结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)

vwvh

  • 1.什么是vw(Viewport Width)和vh(Viewport Height)?
    1.1vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位
    1.2系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
    1.3vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考,而vw和vh永远都是以视口作为参考
    结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)
    -2.什么是vmin和vmax?
    vmin: vw和vh中较小的那个
    vmax: vw和vh中较大的那个
    使用场景: 保证移动开发中屏幕旋转之后尺寸不变

视口

1.什么是视口?

视口简单理解就是可视区域大小我们称之为视口

在PC端,视口大小就是浏览器窗口可视区域的大小

在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980

2.为什么是980而不是其他的值?

因为过去网页的版心都是980

乔老爷子为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980

后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980

3.移动端自动将视口宽度设置为980带来的问题

虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页,但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的,所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小,(和前面讲解Canvas时讲解的viewbox一样, 近大远小原理)

4.如何保证在移动端不自动缩放网页的尺寸?

通过meta设置视口大小

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width设置视口宽度等于设备的宽度

initial-scale=1.0 初始缩放比例, 1不缩放

maximum-scale:允许用户缩放到的最大比例

minimum-scale:允许用户缩放到的最小比例

user-scalable:用户是否可以手动缩放

移动端常用适配方案

1.通过媒体查询

媒体查询的方式可以说是我早期采用的布局方式,

它主要是通过查询设备的宽度来执行不同的css代码,最终达到界面的配置

2.媒体查询优势

简单, 哪里不对改哪里

调整屏幕宽度的时候不用刷新页面即可响应式展示

特别适合对移动短和PC维护同一套代码的时候

3.媒体查询劣势

由于移动端和PC端维护同一套代码, 所以代码量比较大,维护不方便

为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源

为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式

4.应用场景

对于比较简单(界面不复杂)的网页, 诸如: 企业官网、宣传单页等,我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式站点;

对于比较复杂(界面复杂)的网页, 诸如: 电商、团购等,更多的则是才是PC端一套代码, 移动端一套代码




目录
相关文章
计算机中存储单位的换算
计算机中存储单位的换算
|
6月前
|
编解码 前端开发
前端长度单位的区别是什么?
前端长度单位的区别是什么?
47 2
|
6月前
将毫秒数量转换为时分秒字符串(毫秒数→转换为→00:00:00.000或00天00时00分00秒000毫秒形式)
将毫秒数量转换为时分秒字符串(毫秒数→转换为→00:00:00.000或00天00时00分00秒000毫秒形式)
封装一个函数,可以自定义范围与跳过的数字。 例如在 100(不固定) ~ 1000(不固定) 内查找 5 (不固定)的倍数 和 带有 5 的值
封装一个函数,可以自定义范围与跳过的数字。 例如在 100(不固定) ~ 1000(不固定) 内查找 5 (不固定)的倍数 和 带有 5 的值
56 0
|
6月前
|
存储 机器学习/深度学习 C语言
Day3 字符串中找出连续最长的数字串、数组中出现次数超过一半的数字
Day3 字符串中找出连续最长的数字串、数组中出现次数超过一半的数字
61 0
|
存储 Go
1bit等于多少字节?换算方法详解
1bit等于多少字节?换算方法详解
1249 0
wustojc2005中英长度单位换算
wustojc2005中英长度单位换算
49 0
7-10 找最小的字符串 (15 分)
7-10 找最小的字符串 (15 分)
312 0
|
网络架构
一文搞懂基础数据单位换算逻辑
计算机网络单位如何换算? 100Mb=12800KB 100Mbps≈12.5MB/s 数据单位换算、流量速度单位换算 到底是怎么换算的?
一文搞懂基础数据单位换算逻辑
|
Java
java时间工具 判断时间大于一个月,小于一年,时间必须以月为单位分割(欢迎测试)
1 package test; 2 3 import java.io.UnsupportedEncodingException; 4 import java.text.ParseException; 5 import java.
3248 0