媒体查询与自适应

媒体查询

为了实现响应式布局，相当于增加了判断条件

• min-width 大于等于
• max-width 小于等于

媒体类型

• all 适用所有的设备
• print 适用于打印用纸或打印预览视图
• screen 主要适用于电脑/手机/平板等智能设备屏幕
• speech 适用于语音合成器
• tv 电视设备

逻辑运算符

• and 把多个媒体组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真

    @media tv and (min-width: 700px) and (orientation: landscape) 　 
    	orientation: portrait（竖屏，即设备中的页面可见区域高度>=宽度） 　　 
    	orientation: landscape（横屏，即设备中的页面可见区域高度<宽度） 
  

• not 用来对一条媒体查询的结果进行取反

    @media not screen and (color), print and (color) 等价于 
    @media (not (screen and (color))), print and (color) 
  

• only 仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式 在老式浏览器中被应用到

    <link rel="stylesheet" media="only screen and (color)" href="example.css" /> 
  

• , 媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询 时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独 立的，一个查询中的操作符并不影响其它的媒体查询。

     @media (min-width: 700px), handheld and (orientation: landscape
  

媒体特性

绝大多数媒体特性都可以使用“min-” or “max-” 修饰，表示最小条件和最大约束，例如max-width: 600px 表示最大宽度为600px，也就是说当屏幕宽度<=600px的时候媒体查询结果才为true。

• color

  • 表示颜色设备，如果是非彩色设备，color为0，取值为颜色组件的比特数
  • @media all and (min-color: 4) { … }

• device-height/device-width

  • 描述输出设备的高度/宽度(意味着整个屏幕或页面，而不仅仅是呈现区域，比如文档窗口)

      <link rel="stylesheet" media="screen and (max-device-height: 799px)" href="" />  
    

• height/width

  • 高度媒体特性描述了输出设备的呈现表面的高度/宽度(例如窗口的高度或打印机的页面框)。

临界值

pc/pad/mobile
宽度设置时，注意要加()，才会被识别生效，临界值应该会被样式设计的顺序影响

媒体查询可能会遇到的坑，图标

响应式的页面中，图标不要下载成图片，放在大屏里肯定会失真，要用图标，可以设置大小，图标可以设置大小，不要下载成图片

兼容性

link media=“only” 习惯性为only，为了兼容性

实现自适应

不是所有网站都会用媒体查询，但是肯定会有最后的解决方案，让最后的结果实现自适应

• 响应式布局：有相同的HTML结构，通过media去实现

  • link media=""（会加载到客户端、判断是否使用），判断条件，如果满足 href里对应的css文件的生效不满足，也会通过网络加载到客户端

  • style @media 判断完条件后在{}里写对应的代码

• 大型电商网站 :index_pc.html index_pad.html index_phone.html怎么知道执行哪个页面？

  • 通过当前请求，先做一次过滤，这次过滤拿到客户端的信息
  • http请求头会携带许多信息，即使不携带，可以由服务端做一些设置，去发送一些信息，携带发送给服务端

e.g:
只要进行访问，首先做过滤（有自己的判断条件，根据过滤条件展示

m.jd.com/m.you.163.com

jd.com/you.163.com

伸缩盒布局的好处

伸缩盒布局，子元素只做一个设置，固定的宽度，还是伸缩的百分比
其他全都是父元素去设置，宽高不用设置，由子元素撑开
好处：不会影响后续元素，不会脱离文档流，关注点只在伸缩盒父元素

Bootstrap

Bootstrap3:栅格化 float
Bootstrap4:栅格化 flex