响应式与自适应

@LDJman

一、 响应式
（1）何为响应式
响应式就是网站返回一个网站展示文件，浏览器根据屏幕的大小而采用不同布局的视觉最适合的效果，意思同一个网站就是不同的屏幕大小会形成不同布局效果，目的都是为了根据屏幕的大小展现出最优的展示效果。

（2）怎样实现响应式
①首先需要了解CSS3中有一个新的特性叫做媒体查询，就是在同一个CSS3文件中，可以根据媒体查询的设置，而根据屏幕大小匹配到相应的媒体查询代码块。
Eg:@media (min-width:1200px){//媒体查询形式
.xxx{
}
.bb{}
}
②根据不同的屏幕大小而采用不同媒体查询内的设置，那么合理设置媒体查询的数值就很重要，这些媒体查询的分割值，就称为断点。断点的设置一般是根据项目的实际需要而设置，一般是设置为5档
小于480px-----手机竖屏；
480px-768px------手机横屏；
768px-992px-------平板；
992px-1200px------pc窄屏；
大于1200px-------pc宽屏；
设置完断点后，要根据移动端优先还是PC端优先而设置不同，移动端优先（就是照顾手机的用户先）可以写min-width,且由小断点写到大断点，这样要达到设置的最小值才会匹配，所以小屏幕达不到后面大断点的最小值，所以就不会覆盖掉。PC端优先，即相反，写max-width，由大断点写到小断点，大屏幕前面就和适配到，小屏幕的话后面的断点设置会覆盖掉。
③接下来设置头部的meta

Name-告诉浏览器信息；width=device-width//宽为设备的宽；inital-scale=1//初始比例为1，即适配设备画面比例；maximum-scale=1//最大放大比例是1，即设备比例； minimum-scale=1,//最小缩小比例是1，即设备比例；user-scalable=no//设置为画面不可伸缩。 ④设置媒体查询，共同适用可以放在媒体查询外面，减小代码量，提高代码耦合度 ⑤媒体查询内可以设置html内的font-size，以改变不同屏幕大小的rem(rem概念请自行百度，这里不详细说明),整个样式文件最好使用单位都使用rem. ⑥尽量使用%，居中时使用auto等。 ⑦布局上使用流式布局或者flex布局等，等一些可以根据屏幕自适应的布局方式。 ⑧注意图片都要设置自适应，设置%，rem,背景图片也注意设置。 ！响应式大体是以上几个步骤，但更重要的是细心！！！！！ 二、 自适应 （1） 何为自适应 自适应为屏幕大小不一样，但是布局都是一样的，只是显示的各个模块，图片，字体的大小不一样而已，相等于同一个版本，只是按比例地放大缩小。 （2） 怎么实现自适应 自适应的实现跟响应式差不多，只不过不需要设置断点，布局上多采用固定布局或者flex布局。 ！同样自适应的实现也主要为细心，所有的样式实现都需要细心。

三、 响应式与自适应的对比
响应式 自适应
布局不一样，根据屏幕的大小而匹配最优显示效果 布局一样，只是版本的不同比例的缩放
优点：内容适中，画面适宜 优点：书写快捷，画面统一，辨析度高
缺点：书写繁琐，不统一 缺点：不能达到每个屏幕最优显示效果
实现步骤如上，两者差不多，稍复杂一点 实现步骤如上，两者差不多，稍简单一点