css响应式

.标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1
改代码的意义是视口宽度（width）=设备宽度（device-width）
将页面大小 根据分辨率不同进行相应的调节 以展示给用户的大小感觉上差不多。
如果不设置，一般默认为视口width 980px，height 1024px

*{
    margin: 0;
    padding: 0;
}
.wraper{
    width: 50%;
    height: 200px;
    background-color: chartreuse;
}
 

width = device-width : iphone或者ipad 上横竖屏的宽度 = 竖屏时候的宽度 不能自适应的问题
initial-scale=1.0 : windows phone ie浏览器 上横竖屏的宽度 = 竖屏时候的宽度 不能自适应的问题
所以一起写可以达到互相兼容的效果。

2.设置视口
<meta name="viewport" content="width=device-width,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

width： 可视区宽度
device-width: 设备宽度
minimum-scale： 最小缩放比
maximum-scale： 最大缩放比
user-scalable： 是否允许用户缩放（手机双击放大等）
css像素根据设备像素进行计算 1css 像素 == 1 是设备像素 设备的分辨率 dpi值来计算css像素真正展现的大小（这里坐着在前面一章节已经进行了比较详细的解析）
3.响应式网页开发方法
流体网格：可伸缩的网格 （大小宽高 都是可伸缩（可用flex或者百分比来控制大小）float）—》 布局上面 元素大小不固定可伸缩
弹性图片：图片宽高不固定（可设置min-width: 100%）
媒体查询：让网页在不同的终端上面展示效果相同（用户体验相同=>让用户用着更爽） 在不同的设备（大小不同 分辨率不同）上面均展示合适的页面
主要断点： 设备宽度的临界点

（临界点）大小的区别 —》 宽度不同 —》 根据不同宽度展示不同的样式
响应式网页开发主要是在css样式上面进行操作
其中媒体查询为主要应用方式。
4.媒体查询
媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。
css2: media typemedia type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。

css3: media querymedia query是CSS3对media type的增强，事实上我们可以将media query看成是media type+css属性(媒体特性Media features)判断。

媒体查询三种方式（对应css引入方式）

外部引入link
<link rel="stylesheet" media="screen and (max-width: 375px)" href="index.css">

外部引入@import
@import 'index.css' screen and (max-width: 375px);

内部引入style
css样式引入媒体查询不占用权重，所以一般放在css最后面（避免被覆盖）
@media screen and (max-width: 375px){
    html, body {
        width: 100%;
        height: 100%;
        background-color: red;
    }

逻辑操作符：

合并多个媒体属性 and
@media screen and (min-width: 600px) and (max-width:1000px)

@media screen and (min-width: 769px), print and (min-width: 6in)

没有or关键词可用于指定备用的媒体功能，可以将备用功能以逗号分割列表的形式列出
这会将样式应用到宽度超过769像素的屏幕或使用至少6英寸宽的纸张的打印设备

指定否定条件
@media not screen and (max-width:300px)

除了宽度小于300px的才可以显示

向早期浏览器隐藏媒体查询
Only指定某种特定的媒体类型 为了兼容不支持媒体查询的浏览器
@media only screen and (max-width:300px)
==
@media screen and (max-width:300px)

device-width/device-height 是设备的宽度（如电脑手机的宽度 不是浏览器的宽度）
width/height使用documentElement.clientWidth/Height即viewport的值。渲染宽度/高度/视口宽度

5.单位值
Rem：rem是CSS3新增的一个相对单位（root em，根em）相对的只是HTML根元素。
html{
    font-size: 14px;
}
.wraper{
    width: 10rem;
    height: 200px;
    background-color: chartreuse;
}
 

最终等于html跟标签的font-size的10倍

Em：em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（font-size属性是可以继承的）。
.wraper{
    font-size: 16px;
    width: 10em;
    height: 200px;
    background-color: chartreuse;
}

Vw：相对于视口的宽度。视口被均分为100单位的vw
.wraper{
    font-size: 16px;
    width: 50vw;
    height: 200px;
    background-color: chartreuse;
}
 

Vh：相对于视口的高度。视口被均分为100单位的vh
同上vw
Vmax： 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
Vmin：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin