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