响应式布局---基础知识

最新推荐文章于 2022-05-11 00:07:00 发布

AuroraJim

最新推荐文章于 2022-05-11 00:07:00 发布

阅读量233

点赞数

分类专栏：响应式布局文章标签： css html css3

本文链接：https://blog.csdn.net/qq_45835014/article/details/120830756

版权

响应式布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

响应式布局---基础入门

一. 媒体查询(@media)
二. 媒体查询引入的几种方式

一. 媒体查询(@media)

媒体查询的含义：根据不同设备屏幕大小来决定页面的样式（不限于布局、样式）

需求：有一个div，要求在同一个页面根据不同的屏幕大小，来展示不同的样式效果。

基本结构：

<body>
    <!-- 概念：为不同屏幕尺寸设定不同的css的样式 -->
    <div id="dv"></div>
</body>

style样式：

<style>
        #dv {
            width: 100px;
            height: 200px;
        }
		  /* 屏幕大小一 */
        @media screen and (min-device-width:200px) and (max-device-width:500px) {
            #dv{
                background-color: yellow;
            }
        }
         /* 屏幕大小二 */
        @media screen and (min-device-width:501px) and (max-device-width:1200px) {
            #dv{
                background-color: red;
            }
        }
    </style>

调试说明:F12打开控制台，切换到移动端，改变屏幕大小来调试。
在这里插入图片描述
需求：根据屏幕设备屏幕的宽度来分布盒子的个数，分辨率大于400px时，一行显示三个，300到399px的一行显示两个，200到299px时一行显示一个。
基本结构

 <!-- width height 浏览器可视宽高 -->
    <!-- device-width device-heigth 设备屏幕的宽高 -->
    <div class="dv">
        <div></div>
        <div></div>
        <div></div>
    </div>

style样式代码

<style>
        .dv {
            width: 100%;
            height: 500px;
        }

        .dv div {
            float: left;
            height: 200px;
        }

        /* 一行三个div */
        @media screen and (min-device-width:400px) {
            .dv div {
                width: 33.3%;
            }
            .dv div:nth-child(1){
                background-color: green;
            }
            .dv div:nth-child(2){
                background-color: red;
            }
            .dv div:nth-child(3){
                background-color: black;
            }
        }

        /* 两行三个div */
        @media screen and (min-device-width:300px) and (max-device-width:399px) {
            .dv div {
                width: 50%;
            }
            .dv div:nth-child(1){   
                background-color: green;
            }
            .dv div:nth-child(2){
                background-color: red;
            }
            .dv div:nth-child(3){
                background-color: black;
            }
        }

        /* 3行三个div */
        @media screen and (min-device-width:200px) and (max-device-width:299px) {
            .dv div {
                width: 100%;
            }
            .dv div:nth-child(1){
                background-color: green;
            }
            .dv div:nth-child(2){
                background-color: red;
            }
            .dv div:nth-child(3){
                background-color: black;
            }
        }
    </style>

效果展示：(分辨率大于400px）
在这里插入图片描述
（分辨率在300px到399px）

二. 媒体查询引入的几种方式

双style标签引入:在一対style标签中引入，可以把公共代码放到另一对style

<style>
		//公共代码
        .dv {
            width: 100%;
            height: 500px;
        }

        .dv div {
            float: left;
            height: 200px;
        }
        .dv div:nth-child(1){
                background-color: green;
            }
            .dv div:nth-child(2){
                background-color: red;
            }
            .dv div:nth-child(3){
                background-color: black;
            }
    </style>
    <style media="(min-device-width:200px) and (max-device-width:299px)">
        .dv div{
            width: 50%;
        }
    </style>
    <style media="(min-device-width:300px) and (max-device-width:500px)">
          .dv div{
            width: 33.3%;
        }
    </style>

采用link方式引入，标签内部meta判断分辨率

 	<link rel="stylesheet" href="./css/css-1.css">
    <link rel="stylesheet" href="./css/css-2.css" media="(min-device-width:200px) and (max-device-width:299px)">
    <link rel="stylesheet" href="./css/css-3.css" media="(min-device-width:800px)">

释疑：当屏幕分辨率在200px到299px时，采用css-2.css文件，大于800px时，选择css-3.css文件。
源码索取QQ群：822951132（备注来意）

AuroraJim

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
响应式布局---基础知识

响应式布局---基础入门一. 媒体查询(@media)一. 媒体查询(@media)媒体查询的含义：根据不同设备屏幕大小来决定页面的样式（不限于布局、样式）需求：有一个div，要求在同一个页面根据不同的屏幕大小，来展示不同的样式效果。基本结构：<body>  <div id="dv"></div></body>style样式：<style>
复制链接

扫一扫

专栏目录