美文网首页
Web42.媒体查询 flex布局 栅格系统

Web42.媒体查询 flex布局 栅格系统

作者: FiredEarthMusic | 来源:发表于2017-12-21 04:44 被阅读9次

响应式有两种,一种是大型网站,可以理解为同一个域名 2套代码 在后端做一次区分,比如根据用户的userAgent类型展示不同的页面 (特别复杂的网站 PC端和移动端代码没有复用性)
另一种是用一套代码的解决方案

自适应阶段:自从有了不同屏幕的尺寸,我们就开始尝试自适应

1.居中 虽然不能让所有屏幕都自适应,但可以利用居中让元素看起来
在同一位置

.center{
    width: 990px;
    margin: 0 auto;
    height: 200px;
    line-height: 200px;
}
2.百分比
同样可以利用百分比让DOM结构适应屏幕

.container{
    border-top: solid 1px #666;
    border-left: solid 1px #666;  
}
.item{
    display: inline-block;
    width: 33%;
    height: 200px;
    border-right: solid 1px #666;
    border-bottom: solid 1px #666;
    background: orange;
    box-sizing: border-box;
}

3.
对于宽度不一的,我们可以利用浮动做到一定程度的自适应

.container{
    overflow: hidden;
    padding: 20px;
}
.item{
    float: left;
    padding: 8px 12px;
    border: solid 1px #1686cc;
}
4.CSS2媒体查询

CSS3的Media Queries 可以让我们针对不同的设备场景使用不同的CSS

实际在很早之前, CSS就支持媒体查询了
@media print {
    /*  适用于印刷的样式 */
}

常见的媒体类型有
1.all(所有)  适用于所有设备
2.handheld(手持) 用于手持设备
3.print(印刷) 用于分页材料以及打印预览模式下在屏幕上的文档视图
4.projection(投影) 用于投影演示文稿 例如投影仪
5.screen(屏幕) 主要用于计算机屏幕

在使用的时候可以在样式表直接书写  @media指令+空格+媒体类型 (多个逗号隔开)
@media print {
    body { font-size: 10pt }
}
@media screen {
    body { font-size: 13px }parsing-errors
}
@media screen, print {
    body { line-height: 1.2}
}
CSS3 媒体查询

CSS3扩展了媒体类型应用场景
@media screen and (max-width: 990px){
    .container{
        background: orange;
    }
}
当媒体类型匹配且表达式为真的时候,对应style就会起作用,
除非使用not或者only操作符,否则媒体类型不是必需的,默认代表所有媒体类型。
操作符

and
and操作符用于将多个media feature组合成一个查询,同时用于组合media type和media feature, 一个基本的media query类似这样,
一个media feature作用于所有media type
@media (min-width: 700px) { ... }


但是如果只想在横向显示时应用就可以使用and操作符把media type和media feature结合起来
@media (min-width: 700px) and (orientation: landscape) { ... }
这样上面的media query只有在可视窗口(viewport)最小是700px并且是横向显示的时候才返回true,如果还想进一步限制设备为tv可以这样
@media tv and (min-width: 700px) and (orientation: landscape) { ... }

逗号分隔的列表
在使用逗号分隔的查询列表中每个查询都被视为一个独立的查询,任何本查询中的作用符不影响其他查询,只要有一个查询返回true,style就会被作用。

举例来说,如果希望特定style在viewport最小宽度为700px或手持式设备上生效,可以这么写:
@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not
not操作符作用域整个查询,所以只有在整个查询返回false的情况下使用not后才会返回true。当使用逗号分隔的列表的时候not作用于邻近的查询,而不会作用于每个查询
@media not all and (monochrome) { ... }

查询其实会这样起作用
@media not (all and (monochrome)) { ... }

而不是这样
@media (not all) and (monochrome) { ... }

对于逗号分隔的列表
@media not screen and (color), print and (color)

查询是这样子的
@media (not (screen and (color))), print and (color)

only
only操作符用于阻止不支持带有media feature的media queries的浏览器应用特定style
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
media features
有以下常用的media feature

1.width:浏览器宽度

2.height:浏览器高度

3.device-width:设备屏幕分辨率的宽度值

4.device-height:设备屏幕分辨率的高度值

5.orientation:浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait,否则为landscape

6.aspect-ratio:比例值,浏览器的纵横比

7.device-aspect-ratio:比例值,屏幕的纵横比

8.color:设备使用多少位的颜色值,如果不是彩色设备,值为0

9.color-index:色彩表的色彩数

10.monochrome:单色帧缓冲器每个像素的字节

11.resolution:分辨率值,设备分辨率值

12.scan:电视机类型设备扫描方式,progressive或interlace

13.grid:只能指定两个值0或1,是否基于栅格的设备

如何引入media

link方法引入
<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

@media引入
@media screen and (min-width: 600px) and (max-width: 800px){

    选择器{

        属性:属性值;

    }

}

媒体查询兼容性.png

题目1:使用媒体查询实现如下要求

39E6798A-49D1-4B2C-89D7-23F796FA6F83.png

题目2:实现一个简单的栅格系统

相关文章

网友评论

      本文标题:Web42.媒体查询 flex布局 栅格系统

      本文链接:https://www.haomeiwen.com/subject/cpzgwxtx.html