响应式布局

什么是响应式设计？响应式布局有哪些实现方式？响应式设计的基本原理是什么？

定义：据屏幕的大小自动的调整页面的展现方式，可以实现用一个网页自动适应不同大小的屏幕

实现方式：1.媒体查询 2.百分比布局 3.rem 布局 4.vw+vh 5.弹性盒子布局 display:flex

基本原理：通过媒体查询检测不同的设备屏幕尺寸设置不同的css样式 页面头部必须有 meta 声明的viewport

优点

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点

仅适用布局、信息、框架并不复杂的网站

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用元素，加载时间加长

一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

一：媒体查询

使用@media 媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。

书写格式

@media screen and (范围值){

写对应代码

}

div{

width: 100%;

height: 100px;

}

@media screen and (min-width:1200px) {

div{

background-color: blue;

}

}

@media screen and (max-width:1200px) {

div{

background-color: red;

}

}

@media screen and (max-width:700px) {

div{

background-color: green;

}

}

媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

二：百分比%

比如当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

缺点：计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如 width 和 height 相对于父元素的而言的，而 margin、padding 、border-radius 则是相对于元素自身，所以我们使用百分比单位容易使布局问题变得复杂。

所以，不建议用百分比%来做响应式布局。

三：vw/vh

css3 中引入了一组新的单位 vw/vh，与视图窗口有关，vw 表示相对于视图窗口的宽度，vh 表示相对于视图窗口高度。

任意层级元素，在使用 vw 单位的情况下，1vw 都等于视图宽度的百分之一。

与百分比布局很相似，但更好用。

四：rem

rem 单位是相对于 html 元素的字体大小，html 元素也称为根元素。

默认情况下，html 元素的 font-size 为 16px。所以此时 1rem = 16px。

div{

width: 10rem;

height: 10rem;

background-color: red;

}

@media screen and (max-width:414px) {

html{

font-size: 18px;

}

}

@media screen and (max-width:375px) {

html{

font-size: 16px;

}

}

@media screen and (max-width:320px) {

html{

font-size: 12px;

}

}

五：flex 弹性布局

弹性布局只需要依赖于 CSS 样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。