CSS || @media媒体查询

hedzr 发布于2019-08-29 12:16 / 3360人阅读

摘要：并且不能使用绝对单位的其他元素。注意绝对定位的使用，小心引入不同样式响应式设计的核心是引入的模块。利用清除浮动的方式实现设置列宽容器宽列数这里定义列使用浮动进行定位，避免容器内没有内容，为容器设置一个最小高度设置列间距使用。

media实现响应式网页

响应式网页设计Responsive Web Design指可以自动识别屏幕宽度，对并对样式做出相应调整

通过媒体查询实现在不同屏幕宽度下加载不同的CSS样式

1 移动端允许网页自动调整

viewport表示视口：浏览器可视区域宽度和高度

width=device-width：默认网页宽度等于屏幕宽度

initial-scale=1：原始缩放比例为1，即网页占屏幕面积的100%

对于IE6、7、8需要使用Polyfill库：css3mediaqueries.js

2 不使用绝对宽度

网页会根据屏幕宽度调整布局，所以不能使用绝对宽度进行布局。并且不能使用绝对单位的其他元素。

宽度只能使用相对单位百分数100%、vw和vh视口宽度和视口高度

3 相对大小字体

不能使用绝对单位的元素：字体使用em、rem等相对单位进行设置

4 响应式图片

自适应网页需要图片实现自动缩放：只需要将设置max-width: 100%即可

5 流动布局fluid-grid

在布局系统中，各个栅格的位置都是浮动的，并不固定。主要利用float实现栅格系统

float的元素不会在水平方向溢出overflow，出现水平滚动条；而是直接滚动到前面元素的下方。注意绝对定位的使用，小心

6 media引入不同CSS样式

响应式设计的核心是CSS3引入的Media Query模块。自动探测屏幕类型及宽度，符合条件时加载CSS样式

Media Query模块有三种引入方式：

6.1 使用link标签

6.2 使用@import

利用@import url("tinyScreen") screen and (max-width: 400px);满足条件时，可以在现有CSS文件中加载其他的CSS文件

注：@import与link标签的区别：

link属于HTML标签，除引入CSS样式表还有其他作用；@import是CSS提供的一种加载CSS文件的方式

link标签可以定义RSS、定义rel连接属性；@import只能加载CSS文件

HTML页面被下载并且增量解析，link标签被增量解析到便开始加载；@import需要等到HTML页面下载完毕才开始加载

JavaScript的DOM接口不能操作@import

@import可以在现有CSS文件中引入

6.3 使用@media

在CSS文件中，使用@media引入一段查询的样式

@media all and (max-width: 768px) {
    /* 满足查询条件后应用的规则 */
}

7 12列栅格布局系统

主要步骤：

定义容器宽度：100%，必要时可以设置最大宽度max-width。将容器设置为border-box便于设置固定宽度的padding

保证行元素不会溢出到其他行：通过前后添加伪元素，清除浮动

设置列宽：根据100% / 列数，同时设置padding值，用作网格的间距；

设置不同列数组合section的宽度：col-n = col- * n

设置响应式网格：根据媒体查询，设置不同的列宽即可，或者应用不同的列宽

实现12列栅格系统

/* 使用border-box，便于在百分比宽度容器中设置固定宽度的padding */
* {box-sizing: inherit;}
html {box-sizing: border-box;}
p{margin: 0;}

/* 定义容器宽度 */
.grid_container {
    width: 100%;
    max-width: 1200px;
}

/* 定义row：行内的元素不会溢出到其他行。利用清除浮动的方式实现 */
.row::before,
.row::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

/* 设置列宽：容器宽 / 列数；这里定义12列 */
/* 使用浮动进行定位，避免容器内没有内容，为容器设置一个最小高度1px */
/* 设置列间距：使用padding。容器使用的是border-box，所以网格水平间距是水平的padding-left与padding-right之和 */
/* 垂直间距是padding-top与padding-bottom */
[class*="col-"] {
    float: left;
    width: 8.33%;
    min-width: 1px;

    padding: 10px;    
}

/* 多个网格宽度的组合section */

@media screen and (min-width: 769px) {
    .col-md-1 {width: 8.33%;}
    .col-md-2 {width: 16.66%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.33%;}
    .col-md-5 {width: 41.66%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.33%;}
    .col-md-8 {width: 66.66%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.33%;}
    .col-md-11 {width: 91.66%;}
    .col-md-12 {width: 100%;}
}


/* 都不设置样式的具体高度，根据内容撑开 */

/* 响应式，以768px为分界点 */
@media screen and (max-width: 768px) {
    .col-sm-1 {width: 8.33%;}
    .col-sm-2 {width: 16.66%;}
    .col-sm-3 {width: 25%;}
    .col-sm-4 {width: 33.33%;}
    .col-sm-5 {width: 41.66%;}
    .col-sm-6 {width: 50%;}
    .col-sm-7 {width: 58.33%;}
    .col-sm-8 {width: 66.66%;}
    .col-sm-9 {width: 75%;}
    .col-sm-10 {width: 83.33%;}
    .col-sm-11 {width: 91.66%;}
    .col-sm-12 {width: 100%;}
}

/* ------------------------------------------------------------ */
/* 内容的样式 */
[class*="col-"] > p {
    height: 50px;
    line-height: 50px;
    background: #eee;
    color: red;
    border: 1px solid #999;
}

使用：在屏幕小于768px时，应用col-sm-类的样式。


    
        col-4
        col-4
        col-4
    
    
        col-3 
        col-6 
        col-3 
     
    
        col-1 
        col-1 
        col-2 
        col-2 
        col-6

添加偏移offset功能

offset的实现思路是利用margin-left实现偏移，距离与列宽相同。只需添加响应式规则中即可

@media screen and (min-width: 769px) {
    .col-md-1 {width: 8.33%;}
    .col-md-2 {width: 16.66%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.33%;}
    .col-md-5 {width: 41.66%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.33%;}
    .col-md-8 {width: 66.66%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.33%;}
    .col-md-11 {width: 91.66%;}
    .col-md-12 {width: 100%;}
    /* 偏移offset */
    .col-md-offset-1 {margin-left: 8.33%;}
    .col-md-offset-2 {margin-left: 16.66%;}
    .col-md-offset-3 {margin-left: 25%;}
    .col-md-offset-4 {margin-left: 33.33%;}
    .col-md-offset-5 {margin-left: 41.66%;}
    .col-md-offset-6 {margin-left: 50%;}
    .col-md-offset-7 {margin-left: 58.33%;}
    .col-md-offset-8 {margin-left: 66.66%;}
    .col-md-offset-9 {margin-left: 75%;}
    .col-md-offset-10 {margin-left: 83.33%;}
    .col-md-offset-11 {margin-left: 91.66%;}
    .col-md-offset-12 {margin-left: 100%;}
}

8 响应式的实现思路

多写class，在不同条件应用不同的网格；上面例子就是使用这种

利用相同的网格，改变网格的宽度；

idc机房托管混合云 webrtc media媒体库 media 流媒体服务器 media流媒体服务器媒体域名查询

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111783.html

详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

leone 2019-08-02 11:54 评论0 收藏0
详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

ymyang 2019-08-29 17:09 评论0 收藏0
详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

gotham 2019-08-23 12:42 评论0 收藏0
详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

genefy 2019-08-05 15:22 评论0 收藏0
css3 响应式媒体查询

摘要：让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。为了演示一个简单的示例，我们可以更改不同设备的背景颜色 /* 将body的背景颜色设置为tan */ body { background-color: tan; } /* 在992px或更低...

李涛 2019-08-05 17:44 评论0 收藏0
css3 响应式媒体查询

摘要：让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。为了演示一个简单的示例，我们可以更改不同设备的背景颜色 /* 将body的背景颜色设置为tan */ body { background-color: tan; } /* 在992px或更低...

Bowman_han 2019-08-30 15:44 评论0 收藏0