当前位置：网站首页>响应式布局与px/em/rem的比对

响应式布局与px/em/rem的比对

2022-07-31 00:38:00 【百里狂生】

概要

文章目录

概要

1. 响应式布局

1.1 自适应的目的

自适应的目的是在不同分辨率的不同设备上显示相同的画面

手机屏幕比较小，宽度通常在600px以下，PC端一般在1000px以上，部分高配的笔记本在2000px也有，同样的页面要显示在不同的设备上，还要呈现出满意的效果，不是一件容易的事情。

响应式的概念应该是覆盖了自适应，但是包括的东西太多了。

响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局

1.2 响应式布局的一些技术记录

1、允许网页的宽度自动的调整
2、尽量少使用绝对的宽度，多点百分比
3、相对大小的字体：字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置。
4、流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出),避免了水平滚动条的出现。
5、选择加载css

<!-- 这个意思是如果屏幕宽度小于400px就加载rinyScreen.css文件 -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css">

2. px / em / rem 的比对

2.1 px

px 是你屏幕设备物理上能显示的最小的一个点，这个点不是固定宽度的，不同设备上的长宽比例有可能会不同

div {
    
    font-size: 16px;
    width: 50px;
    height: 50px;
    background-color: #f8f8f8;
}

<div>物理像素点文本大小</div>

2.1.1 px 的兼容性

兼容所有浏览器

2.2 em

em 相对于父元素的font-size大小的相对单位

所有现代浏览器下默认字体尺寸是16px，这时1em = 16px,然后你人为把body里面定义font-size: 12px;(把浏览器默认16px改小)，此时1em = 12px;
如果0.8em实际上就等于12px*0.8，

em的用处是你要整个网页字体统一变大变小，你只要改body里面的font-size的值就行了。

另外：

em 会继承父元素的字体大小

.parent {
    
    font-size: 10px;
    background-color: #f8f8f8;
}
.parent-2 {
    
    font-size: 1em; /* font-size: 10px */
    width: 1em;     /* width: 10px */
    height: 1em;    /* height: 10px */
    background-color: #777;
}
.child {
    
    font-size: 5em; /* font-size: 50px */
    width: 5em;     /* width: 50px */
    height: 5em;    /* height: 50px */
    background-color: #52ccba;
}

<div class="parent">
    <div class="parent-2">
        父元素文本大小1em
        <div class="child">子元素文本大小5em</div>
    </div>
</div>

2.2.1 em 的兼容性

在这里插入图片描述

2.3 rem

相对于HTML文档的font-size大小的相对单位

rem是相对于html元素的font-size大小的相对单位，所以在使用rem 的时候，只需要设置html元素的font-size大小即可，而且html的font-size是rem 的基准。

html {
    
    font-size: 10px;
}
.rem-1 {
    
    width: 1rem;        /* width: 10px */
    height: 1rem;       /* height: 10px */
    font-size: 1rem;    /* font-size: 10px */
    background-color: #f8f8f8;
}
.rem-2 {
    
    width: 5rem;        /* width: 50px */
    height: 5rem;       /* height: 50px */
    font-size: 5rem;    /* font-size: 50px */
    background-color: #52ccba;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8">
        <title>rem</title>
    </head>
    <body>
        <div class="rem-1">文本大小为1rem</div>
        <div class="rem-2">文本大小为5rem</div>
    </body>
</html>