响应式布局的使用

此篇文章介绍响应式布局的步骤以及每步的具体知识点

1.viewport 视口

我们知道响应式的网站会随着页面宽度的改变而改变，因此我们需要加上viewport，目的就是为了使HTML页面的宽度等于设备手机机型的宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1.1 位置

这句代码一般放在head元素内，为了方便可以把这句话加在我们自定义好的代码块内；

1.2 代码的详解

这是最全面的代码属性讲解，但是我们现在一般都简写成上面的代码；

• name=“viewport” 视口
• width=device-width 宽度 = 设备的宽度
• user-scalable=no 是否允许用户缩放HTML页面，默认值为Yes
• aximum-scale=1.0 定义最大缩放比例
• minimum-scale=1.0 定义最小缩放比例

2. @media screen and (条件){CSS代码} 媒体查询

2.1 媒体查询的介绍

• 媒体查询一般都使用以下这句话
  • @media 代表媒体、媒介
  • 媒体类型
    • screen 设备类型（手机、平板）
    • all 所有类型（一般使用这个）
  • and 连接符
  • （） 判断条件
    • max-width：700px 满足最大宽度为700px(小于等于700px)
    • min-width：700px 满足最小宽度为700px（大于等于700px）

  这里都是使用最大最小宽度，因为在第一步的视口处就是为了获得HTML的宽度。并且最大宽度是用在响应式布局的，移动端都是使用最小值。

  • { … } CSS样式

  就是把满足此条件的css 样式写在{}内

2.2 媒体查询中出现两个条件时怎么办

当我们在判断条件时，需要满足一个范围内的值，此时可以再用一个and进行连接

@media screen and (max-width:700px){
  	header{
    	width:100%;
 	 }
}

/* 320~375*/
@media screen and(min-width:320px) and (max-width:375px){
 	header{
    	width:100%;
 	 }
}

2.3 媒体查询需要的注意事项

• 每一项与每一项之间必须有空格，否则媒体查询不起作用
  • @media 空格 all 空格 and 空格 （条件） {…}
• 媒体查询内的选择器权重必须大于等于媒体查询外面的权重，否则不起作用

3.响应式布局需要适配的手机机型

• iPhone5/5s 320
• iPhone6/6s 375
• iPhone6Plus 414

4.总结

通过上面的介绍，我们可以把响应式布局总结为一下三步

• 1.新建一个.html页面，加上viewport视口这句代码
• 2.写出HTML的结构，按照原来PC端的结构，需要怎么写，仍然怎么写
• 3.写出CSS样式
  • PC端的样式写在最前面
  • 媒体查询内的样式写在最后面，并且这部分涉及到的所有样式都写在这个里面