移动端布局-响应式布局常用解决方案

最新推荐文章于 2024-05-16 13:18:18 发布

BittersweetYao

最新推荐文章于 2024-05-16 13:18:18 发布

阅读量804

点赞数 2

分类专栏：前端进阶前端小白文章标签：前端 css html css3

本文链接：https://blog.csdn.net/qq_62415996/article/details/128711093

版权

前端进阶同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端小白

5 篇文章 0 订阅

订阅专栏

前言：前端开发常用的自适应方法如下：

Px和视口

媒体查询

百分比

自适应场景下的rem解决方案

通过Vw/Vh来实现自适应

css3新单位以及响应式布局单位详解

1.rem：

rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

优点：

rem布局可以实现响应式布局，他以根元素html的fontsize来决定大小，这是动态的，他跟px可以通过计算相互转换，下载插件后就不用自己计算了

缺点：

在响应式布局中，必须通过js来动态控制根元素font-size的大小。

2.媒体查询：

使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：
 @media screen and (max-width: 960px){
  body{
    background-color:#FF6699
  }
 }
 
 @media screen and (max-width: 768px){
  body{
    background-color:#00FF66;
  }
 }
 
 @media screen and (max-width: 550px){
  body{
    background-color:#6633FF;
  }
 }
 
 @media screen and (max-width: 320px){
  body{
    background-color:#FFFF00;
  }
 }
上述的代码通过媒体查询定义了几套样式，通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

优点

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

缺点

媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

3.百分比

（1）子元素height和width的百分比

子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。比如：

style为： .father{ width:200px; height:100px; } .child{ width:50%; height:50%; }
 <div class="parent">
 <div class="child"></div>
 </div>
(2) top和bottom 、left和right

子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样

子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。

3）padding,margin

子元素的padding和margin如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

如下面的这个典型应用，做出一个长宽恒定比例的长方形
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 </head>
 <style>
 .trangle{
 height:0;
 width:100%;
 padding-top:55%;
 background-color: rgb(9, 122, 166);
 }
 </style>
 <body>
  <div class="trangle">
  </div>
 </body>
 </html>

优点

灵活好用，可以用在很多场景，兼容性页不错

缺点

（1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

（2）从上面的例子可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

css3新单位vw、vh、vmin、vmax

1.含义：vw、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位1，代表类似于1%。**

视窗( Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

2.具体描述：

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

vh：视窗高度的百分比（1vh 代表视窗的宽度为 1%）

vmin：当前 vw 和 vh 中较小的一个值

vmax：当前 vw 和 vh 中较大的一个值

3.vmin，vmax的用处

做移动页面开发时，如果使用 vw、 wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于vmin和vmax是当前较小的vw和vh和当前较大的vw和vh。这里就可以用到vmin和vmax。使得文字大小在横竖屏下保持一致

视窗（Viewport）单位除了可以用来设置元素的宽高尺寸，也可以在文本中使用。下面使用vw设置字体大小来实现响应式文字
    <style>
        html,
        body,
        div,
        span,
        h1,
        h2,
        h3 {
            margin: 0;
            padding: 0;
            border: 0;
        }
 
        .demo {
            width: 100vw;
            font-size: 5vw;
            margin: 0 auto;
            background-color: #1781ba;
            color: #FFF;
        }
 
        .demo2 {
            width: 90vw;
            font-size: 5vw;
            margin: 0 auto;
            background-color: #07b06f;
        }
 
        .demo3 {
            width: 50vw;
            height: 50vh;
            font-size: 1vw;
            margin: 0 auto;
            background-color: #cb2b70;
            color: #FFF;
        }
    </style>
 
    <body>
        <div class="demo"><h1>宽度100%，字体5%</h1></div>
        <div class="demo2"><h1>宽度80％, 字体5％</h1></div>
        <div class="demo3"><h1>宽度50％, 高度50％, 字体1％</h1></div>
    </body>
 
    </html>
 