响应式布局初始(一)

最新推荐文章于 2022-08-03 00:35:55 发布

ResidualBridge

最新推荐文章于 2022-08-03 00:35:55 发布

阅读量216

点赞数

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

本文链接：https://blog.csdn.net/weixin_46410264/article/details/106205085

版权

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

2 篇文章 0 订阅

订阅专栏

响应式布局初始（一）

响应式布局是为了实现网页页面适应各种设备屏幕，如手机打印机等各个不同的终端。

媒体查询模块

媒体查询（Media Queries）查询主要包括两个重要的内容：媒体类型和媒体特性；

媒体类型

媒体指定的值	类型描述
all	所有的媒体设备
screen	显示器、手机、平板等设备
print	打印机或者打印预览视图
speech	屏幕阅读器等发声设备
handheld	如Pad和小型电话等掌上设备或者更小的设备
tv	电视机类型设备
projection	投影设备
embossed	盲文打印机
braille	盲文触摸式反馈设备
tty	用于固定的字符网格，如电报，终端设备等

常用的是前面三个（all、screen、print），后面的类型在W3C中已经被废弃。

媒体特性

在CSS3中媒体特性于CSS属性类似，但于CSS属性不同的是，美特特性使用min/max来对大于等于或小于进行逻辑判断

媒体特性的属性	描述
width和height	浏览器窗口的高和宽
device-width和device-height	输出设备的宽和高
orientation	浏览器窗口方向（纵向：portrait、横向：landscape）
resolution	设备的分辨率
aspect-ratio	浏览器窗口宽度与高度的比率
device-aspect-ratio	输出设备屏幕的可见宽度与高度的比率
color	输出设备的颜色值，非彩色设备，则为0
color-index	输出设备的彩色查询表中的色彩数，没有查询表，则为0
monochrome	一个单色帧缓冲区中每像素包含的字节数，非单色设备，则为0
scan	电视类设备的扫描方式，逐行扫描：progressive，隔行扫描：interiace
grid	用于查询输出设备是否使用栅格或点阵，基于栅格时值为1，否则为0

Media Queries 的引用方法

（1）使用link方法引用样式

<link rel="stylesheet" type="text/css" href="mystyle.css" media="sccreen" />
<link rel="stylesheet" type="text/css" href="mystyle.css" media="sccreen and (max-width:1200px)" />

（2）@import方法引用

<head>
    <style type="text/css">
        @importurl(mystyle.css) screen and (max-width:900px);
    </style>
</head>

（3）@media方法引用

<style>
    @media 媒体类型 and (媒体特性){样式定义}
</style>

CSS3媒体查询的具体应用

（1）最大宽度：max-width

@media screen and (max-width:480px){
    .ads{
        display:none;
    }
}
/*  当屏幕的宽度小于等于480px时，页面中ads这个类隐藏*/

（2）最小宽度：min-width

@media screen and (min-width:900px){
    .ads{
        width:900px;
    }
}
/*当屏幕宽度大于等于900px时，页面中ads类的宽度为900px*/

（3）使用多个媒体特性

@media screen and (min-width:600px) and (max-width:1200px){
    .ads{
        background-color:#f90;
    }
}
/* 当屏幕的宽度大于600px小于1200px时，页面中ads类的背景颜色为#f90 */

（4）device-width

<link rel="stylesheet" media="screen and (nax-device-width:500px)" href="mystyle.css" />
<!-- 样式文件在最大设备宽度为500px的屏幕上显示 -->

（5）not关键词

@media not print and (min-width:1200px){样式代码}
/* 样式代码适用于除打印设备和宽度大于1200px的所有设备上 */

（6）only关键词

<link rel="stylesheet" media="only screen and (max-device-width:300px)" href="mystyle.css" />
<!-- 对于支持媒体特性的设备，忽略only，正常使用样式 -->
<!-- 对于只支持媒体类型的设备，不读取样式 -->
<!-- 对于不支持媒体特性的设备，不论是否支持only，都不会采用样式 -->

媒体查询demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
/* 通用样式 */
*{
    margin: auto;
    padding: 0;
}

/* 正常显示样式 */
header,
main,
footer{
    margin-top: 10px;
}
header{
    height: 100px;
    background: #B292FF;
}
.left,.main,.right{
    background: peachpuff;
}
footer{
    height: 100px;
    background: dimgray;
}

/* 响应样式 宽度大于等于960px */

@media screen and (min-width: 960px){
    header,
    main,
    footer{
        width: 960px;
    }
    .left,.main,.right{
        float: left;
        height: 500px;
    }
    .left,.right{
        width: 200px;
    }
    .main{
        width: 550px;
        margin-left: 5px;
        margin-right: 5px;
    }
    main{
        height: 500px;
    }
}

/* 响应样式 宽度大于等于600px 小于等于960px */

@media screen and (min-width: 600px) and (max-width: 960px){
    header,
    main,
    footer{
        width: 600px;
    }
    .left,.main{
        float: left;
        height: 400px;
    }
    .right{
        display: none;
    }
    .left{
        width: 160px;
    }
    .main{
        width: 435px;
        margin-left: 5px;
    }
    main{
        height: 400px;
    }
}

/* 响应样式 宽度小于等于600px */

@media screen and (max-width: 600px){
    header,
    main,
    footer{
        width: 400px;
    }
    .left,.right{
        width: 400px;
        height: 100px;
    }
    .main{
        margin-top: 10px;
        width: 400px;
        height: 200px;
    }
    .right{
        margin-top: 10px;
    }
    main{
        height: 420px;
    }
}
</style>
<body>

<header>Header</header>
<main>
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
</main>
<footer>Footer</footer>
</body>
</html>

ResidualBridge

关注

0
点赞
踩
1

收藏

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

响应式布局初始（一）响应式布局是为了实现网页页面适应各种设备屏幕，如手机打印机等各个不同的终端。媒体查询模块媒体查询（Media Queries）查询主要包括两个重要的内容：媒体类型和媒体特性；媒体类型媒体指定的值类型描述all所有的媒体设备screen显示器、手机、平板等设备print打印机或者打印预览视图speech屏幕阅读器等发声设备handheld如Pad和小型电话等掌上设备或者更小的设备tv电视机类型设备projecti
复制链接

扫一扫

专栏目录