21-媒体查询/响应式布局

媒体查询（响应式布局）

一个网站能兼容多个终端，而不是为每个终端做一个特定的版本

1. 概念：媒体查询只是一个工具，不是特定的属性或属性值

   响应式布局需要满足三个条件

   1. 网站必须建立灵活的布局基础
   2. 引用到网站的图片必须是可伸缩的
   3. 不同的显示风格，需要在Media Query上设置不同的样式

   缺少任何一个功能，都不能称为合格的响应式网页设计

2. 作用：可以使用媒体查询来判断当前用户设备特性（屏幕的大小）从而设置不同的css样式

3. 语法：@media 设备的类型 操作符号(设备特性){css声明}

   • @media 定义的是媒体查询
   • 设备的类型 电脑手机平板屏幕 screen/all
   • 操作符号 常用的有and，还有一些不常用的（not,only）
   • （设备特性）min-width/max-width

4. 关于媒体查询在书写时候的注意点

   • 媒体查询建议写在样式表的最下面，设置权重的问题
   • 媒体查询每个英文单词之间需要空格
   • 如果有多个设备特性的时候需要写多个操作符号和后面的设备特性
   • 在设备特性的小括号内不可以加特殊符号（特指;）
   • 不同电脑厂商在设置媒体查询时候可能会存在一些误差（300px/301px）

5. 响应式布局重要概念：断点

   • 断点是响应式设计的构建块：使用它们来控制何时可以再特定的屏幕或者设备大小调整布局
   • 使用媒体查询按断点构建CSS：媒体查询是CSS的一项功能，可以根据一组浏览器和操作系统参数有条件地应用样式

   

   @media all and (min-width:300px) and (max-width:500px){
       div{
           font-size: 18px;
           color: red;
       }
   }
   

6. 优缺点

   • 优点：可以通过检测屏幕特性改变用户的相关设置，相对比较灵活可以做到响应式
   • 缺点：麻烦

css2做响应式布局，了解

<link rel="stylesheet" href="css/style1.css" media="all and  (min-width:300px) and (max-width:500px)">

移动端

手机常见的概念

1. ppi 手机像素密度 4个像素点 苹果
2. dpi 1个像素点 安卓
3. retina 屏幕 高清显示屏
   • bug 1px的边框解析成2px => 解决方式：设置成0.5px / 缩放

移动端布局：单位rem