响应式布局常用方案对比（媒体查询、百分比、rem、vw-vh）

时间：2023-04-05 18:41:56 HTML5

我的博客原文地址：原文地址如果文章对你有帮助，你的star就是对我最好的鼓励~简介：在前端开发中，静态网页通常需要适配不同分辨率的设备。常用的自适应方案包括媒体查询、百分比、rem和vw/vh等。本文从px为单位出发，分析px在移动端布局中的不足，然后介绍几种不同的自适应方案。px和viewport媒体查询百分比自适应场景下rem方案使用vw/vh实现自适应1.px和viewport在静态网页中，我们经常以像素（px）为单位来描述一个元素的宽度高度和位置信息。在PC端，一般认为在CSS中，1px所代表的真实长度是固定的。那么，px真的是设备无关的，是不是像长度单位米、分米一样是固定大小的呢？答案是不。下图1.1和图1.2分别为PC端和移动端下的显示结果。在网页中，我们设置的font-size统一为16px。

图1.1font-size为16px在PC端显示结果

图1.2移动端font-size为16px显示结果

从上面两张图的对比可以看出，字体都是16px的。很明显，文字在PC端显示正常，但是在移动端，文字很小，几乎看不到，这说明在css中1px不是一个固定大小。直观上，我们发现移动端1px代表的长度较小，文字显示不清晰。那么是什么决定了css中1px的真实长度呢？为了弄清楚这个概念，我们首先介绍像素和视口的概念1.像素像素是网页布局的基础。像素代表计算机屏幕可以显示的最小区域。像素分为两类：CSS像素和物理像素。我们在js或者css代码中使用的px单位指的就是css像素。物理像素也称为设备像素，只与设备或硬件有关。同样尺寸的屏幕，设备密度越高，物理像素越多。下表是css像素和物理像素的具体区别：|css像素|是为web开发者提供的，css中使用的抽象单元||-|:-:||物理像素|只和设备的硬件密度有关，任何设备的物理像素都是固定的|那么CSS像素和物理像素之间的转换关系是怎样的呢？要想弄清楚CSS像素和物理像素之间的转换关系，首先要了解什么是viewport。2.视口广义的视口是指浏览器显示内容的屏幕区域，狭义的视口包括布局视口、视觉视口和理想视口（一）布局视口（layoutviewport）布局视口定义默认移动端pc网页的布局行为改变，因为通常pc的分辨率较大，默认布局视口为980px。也就是说，如果不设置网页的视口，PC端的网页会默认根据布局视口显示在移动端。因此，我们可以清楚地看到，当使用默认布局视口时，根植于PC端的网页在移动端会显示模糊。(2)视觉视口（visualviewport）视觉视口表示在浏览器中看到的网站的显示区域。用户可以通过缩放来查看网页显示的内容，从而改变视觉视口。视觉视口的定义就像拿着放大镜从不同的距离观察同一个物体。视觉视口只是类似放大镜显示的内容，所以视觉视口不会影响布局视口的宽高。(3)理想视口（idealviewport）或者应该叫做“ideallayoutviewport”，在移动设备中指的是设备的分辨率。换句话说，理想的视口或分辨率是给定设备物理像素的最佳“布局视口”。在上述视口中，最重要的是理清了理想视口的概念。在移动端，理想视口或分辨率与物理像素之间的关系是什么？为了明确分辨率和物理像素的关系，我们引入一个DPR（Devicepixelratio）设备像素比来表示，它可以写成：1DPR=物理像素/分辨率在没有缩放的情况下，一个cssApixel对应一个dpr，也就是说不缩放1CSSpixel=physicalpixel/resolution另外，在移动端的布局中，我们可以通过viewportmeta标签来控制布局。例如，一般情况下，我们可以使用下面的标签让移动端在理想视口下布局：以上meta标签各属性详细介绍如下：|属性名称|价值|说明||-|:-:|-:||宽度|正整数|以像素为单位定义布局视口的宽度||身高|正整数|定义布局视口的高度，以像素为单位，很少使用||初始规模|[0,10]|初始缩放，1表示不缩放||最小尺度|[0,10]|最小缩放比例||最大尺度|[0,10]|最大缩放比例||在终端布局中，我们将在meta标签中将宽度设置为device-width。device-width一般表示分辨率的宽度。通过设置width=device-width，我们将布局视口设置为理想视口。嘴。3.px与自适应上面我们了解到，通过视口meta标签将布局视口设置为理想视口时，1个css像素可以表示为：1个CSS像素=物理像素/分辨率。让我们知道PC端布局视口通常是980px，移动端以iphone6为例，分辨率为375667，也就是说布局视口理想情况下是375px。比如现在我们有一个750px1134px的视觉稿，那么在PC端，一个css像素可以这样计算：PC端：1个CSS像素=物理像素/分辨率=750/980=0.76px在iphone6下：iphone6:1个CSS像素=物理像素/分辨率=750/375=2px也就是说在PC端，一个CSS像素可以用0.76个物理像素表示，而在iphone6中一个CSS像素表示2个物理像素.另外，不同的移动设备有不同的分辨率，即一个CSS像素可以表示的物理像素是不同的。因此，如果在CSS中仅仅使用px作为长宽的单位，其结果是无法通过一套样式来实现。两端自适应。2、媒体查询我们上面提到，在不同的设备下，在css文件中，1px所代表的物理像素大小是不同的，所以不可能通过一套样式来实现每一端的自适应。由此我们想到：如果一套样式还不够，是否可以每个设备都有不同的一套样式来达到自适应的效果呢？答案是肯定的。使用@media媒体查询可以针对不同的媒体类型定义不同的样式，尤其是响应式页面，可以针对不同的屏幕尺寸编写多套样式，从而达到自适应的效果。例如：@mediascreenand(max-width:960px){body{background-color:#FF6699}}@mediascreenand(max-width:768px){body{background-color:#00FF66;}}@mediascreenand(max-width:550px){body{background-color:#6633FF;}}@mediascreenand(max-width:320px){body{background-color:#FFFF00;}}以上代码通过mediaQuery定义了几组样式，通过max-width设置样式生效时的最大分辨率。上面的代码分别为0到320px、320px到550px、550px到768px、768px到960px分辨率的屏幕设置了不同的背景。颜色。通过媒体查询，你可以通过为不同分辨率的设备编写不同的样式来实现响应式布局。例如，我们为不同分辨率的屏幕设置不同的背景图片。比如为小屏手机设置@2x图片，为大屏手机设置@3x图片，可以通过媒体查询轻松实现。但是，媒体查询的缺点也很明显。如果浏览器大小变化时需要更改的样式太多，那么多套样式代码会很繁琐。3.百分比除了使用px结合媒体查询来实现响应式布局，我们还可以使用百分比单位“%”来实现响应式效果。例如，当浏览器的宽度或高度发生变化时，可以使用百分比单位，使浏览器中组件的宽度和高度随着浏览器的变化而变化，从而达到响应式的效果。要想理解百分比布局，首先要理解的问题是：CSS中子元素中的百分比（%）是谁的百分比？直观的理解，我们可能认为子元素的百分比完全是相对于直接父元素的，高度的百分比是相对于高度的，宽度的百分比是相对于宽度的。当然这个理解是对的，但是按照CSS盒子模型，除了height和width属性，还有padding，border，margin等属性。那么这些属性设置成百分比，是不是以父元素的属性为准呢？另外，border-radius、translate等属性中也有百分比，它们是相对于什么的？我们来详细分析一下。1.百分比的具体分析(1)子元素高宽百分比子元素的高度或宽度使用的百分比是相对于子元素的直接父元素，宽度是相对于父元素的宽度元素，高度是相对于父元素的高度。例如：