当前位置：网站首页>Responsive layout vs px/em/rem

Responsive layout vs px/em/rem

2022-07-31 00:48:00 【Wild Life】

概要

文章目录

概要

1. 响应式布局

1.1 The purpose of adaptive

Is the purpose of adaptive on different devices with different resolutions showed images of the same

手机屏幕比较小,宽度通常在600px以下,PCClient is in commonly1000px以上,Part of the high-end notebook in2000px也有,The same page to display on different equipment,还要呈现出满意的效果,不是一件容易的事情.

响应式的概念应该是覆盖了自适应,But including too much.

Responsive layout automatically adjusted according to the size of the screen of the page show the way,以及布局

1.2 Response to some of the layout technology records

1、允许网页的宽度自动的调整
2、Use less as far as possible the width of the absolute,More percentage
3、相对大小的字体：Font don't usepx写死,It is best to use the relative size ofem,Or hd solutionrem,This does not restrict with the font,Other attributes can also be so Settings.
4、流式布局,float等float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现.
5、选择加载css

<!-- This means if the screen width less than400px就加载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 Are you physically able to display the smallest screen equipment a point,This point is not a fixed width,Different aspect ratio on the equipment could be different

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

<div>Physical pixel text size</div>

2.1.1 px 的兼容性

兼容所有浏览器

2.2 em

em 相对于父元素的font-sizeThe size of the relative unit

All modern browsers default font size is16px,这时1em = 16px,And then for youbody里面定义font-size: 12px;(The default browser16px改小),此时1em = 12px;
如果0.8em实际上就等于12px*0.8,

emUse the page font is you want unity becomes big small,You only have to changebody里面的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">
        The parent element text size1em
        <div class="child">Child element text size5em</div>
    </div>
</div>

2.2.1 em 的兼容性

在这里插入图片描述

2.3 rem

相对于HTML文档的font-sizeThe size of the relative unit

rem是相对于html元素的font-sizeThe size of the relative unit,所以在使用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>