响应式布局

最新推荐文章于 2023-04-25 17:00:15 发布

置顶变啊变

最新推荐文章于 2023-04-25 17:00:15 发布

阅读量119

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/JACK_15/article/details/121217615

版权

响应式布局

什么是响应式布局

1、响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
2、传统的开发方式是PC端开发一套，手机端再开发一套
3、使用响应式布局只要开发一套就够。

效果

小屏幕
大屏幕

如何实现响应式布局

rem

什么是rem

根元素的字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem</title>
</head>
<style>
    html{
        font-size: 20px;
    }
    .content-rem{
        width: 10rem;
        height: 10rem;
        background-color: #dfdfdf;
    }
</style>
<body>
    <div class="content-rem">

    </div>
</body>
</html>

如何使用rem实现响应式布局

1.使用css媒体查询设置不通的根元素字体大小
2.使用css中的calc动态计算出根元素字体大小
3.使用js代码动态设置根元素字体大小

    /*使用媒体查询方式*/ 
@media screen and (max-device-width: 700px) {
        html{
            font-size: 20px;
        }
    }
    @media screen and (max-device-width: 2000px ) and (min-device-width: 701px) {
        html{
            font-size: 40px;
        }
    }

    /*使用calc计算出font-size*/
html{
        font-size: calc(100vw/80);
    }

  let clintWidth=window.innerWidth/1080 * 100
    document.documentElement.style.fontSize=clintWidth+'px'

使用百分比布局(具有局限性)

1.通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果
2.计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。
所以，不建议用%来做响应式布局。

  html{
        height: 100%;
    }
    body{
        width: 100%;
        height: 100%;
    }
    .content-rem{
        width: 50%;
        height: 50%;
        background-color: #dfdfdf;
    }

vw/vh

1.vw(ViewportWidth)、vh(ViewportHeight)视窗宽度、视窗高度，1vw=0.01视窗宽度，1vh=0.01视窗高度

   .content-rem{
        width: 50vw;
        height: 50vh;
        background-color: #dfdfdf;
    }

使用ui框架的栅格布局

1.iview、elementUI的栅格布局为一行24格
2.layui的栅格布局为一行12格

 <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <todo-list />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <box-card />
      </el-col>
    </el-row>

变啊变

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

响应式布局什么是响应式布局1、响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。2、传统的开发方式是PC端开发一套，手机端再开发一套3、使用响应式布局只要开发一套就够。效果如何实现响应式布局rem什么是rem根元素的字体大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>rem</title>&l
复制链接

扫一扫