什么是响应式布局

最新推荐文章于 2024-03-13 14:48:10 发布

Pink&Sakura

最新推荐文章于 2024-03-13 14:48:10 发布

阅读量896

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/galaxyrt/article/details/117406414

版权

Web前端专栏收录该内容

23 篇文章 6 订阅

订阅专栏

响应式布局：同一张网页在不同设备上显示不同的样式，可以很友好的匹配多个终端设备

一、布局方式

1、固定宽度布局

主流宽度有：960px/980px/1190px/1210px

2、流式布局：百分比设置相对宽度

3、响应式布局：检测设备信息，设备宽度不同，布局不同，阅读体验好

4、几种方法混用

二、响应式布局

实现方法：

1、Media Query 媒体查询

由CSS3中提取出来的一些规则和属性完成对不同设备进行不同样式的设定

Viewport视口

视口：显示网页的区域。

视口规定：

布局视口=设备视觉视口，不可缩放

meta:vp扩展

<meta name="viewport"content="width=device-width,user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
Ctrl+E即可完成扩展

根据设备宽度设置CSS样式

设备屏幕尺寸

超小屏（extra small) <768px

小屏small >=768px

中等medium >=992px

大屏large >=1200px

<style>
    body{
        background-color: cyan;
    }
    @media screen and (min-width:768px){
        /* 当屏幕宽度大于768px时改变背景颜色 */
        body{
            background-color: deeppink;
        }
    }
    @media screen and (min-width:992px){
        /* 屏幕宽度大于992px时改变背景颜色 */
    }
</style>
注意：and 前后一定要带有空格否则无法解析
属性：
min-height    页面最小高度
min-width     页面最小宽度
max-height    页面最大高度
max-width     页面最大宽度

<!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
    ,maximum-scale=1.0,minimum-scale=1.0">
    <style>
            body{
        background-color: cyan;
    }
    @media screen and (min-width:768px){
        /* 当屏幕宽度大于768px时改变背景颜色 */
        body{
            background-color: deeppink;
        }
    }
    @media screen and (min-width:992px){
        /* 屏幕宽度大于992px时改变背景颜色 */
    }
    body{
        background-color:deepskyblue;
    }
    @media screen and (min-width:1200px){
        /* 当屏幕宽度大于768px时改变背景颜色 */
        body{
            background-color:fuchsia;
        }
    }
    </style>
</head>
<body>
    
</body>
</html>