【疑点】如何实现响应式布局？

 

现在人们的上网方式各式各样，有手机、ipad、电脑等等。老老实实一种媒体端很差么，哎，不过这也是没办法的事儿。

这时候只能靠咱们前端去兼容各个款式的显示器了~

想要页面显示的好看，又让代码简易，就要用到响应式布局。

此篇文章会在如下几个方面啰嗦一下响应式布局的各个问题：

一、响应式布局的优缺点

二、可实现的几个方式

①百分比自适应布局

②经过媒体查询

③使用JS根据浏览器设备引用不一样的CSS值

三、应用开发中实际使用

 

---

 

响应式布局的优缺点

一、优势：

与以往的弹性盒子相比，响应式布局会更好的、更主动的根据用户设备变化更呈现出不一样的效果，它比弹性盒子更灵活，可读性更强。响应式的一套方案解决全部设备的自适应问题。

 

二、缺点：

研发难度高，对应的css文件多是多个，也多是单个。

 

---

 

 

可实现的几个方式

百分比自适应布局

一、首先容许网页宽度自动调整

     在网页代码的头部，加入一行viewport元标签。

 

　   代码：　　

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

　viewport 是指须要加载meta 标签时读取的名字为“视口”，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

 

二、CSS代码不使用绝对宽度！！！

     因为网页会根据屏幕宽度调整布局，因此不能使用绝对宽度的布局，也不能使用具备绝对宽度的元素。

　 具体说，CSS代码不能指定像素宽度

　 只能指定百分比宽度或者让宽度自适应。

 

三、一样字体也不能使用绝对大小（px），而只能使用相对大小（em）。

 

优势：简单方便

缺点：在额外设置margin、padding时，或者使用不一样浏览器时，会使得布局混乱 

 

 

 

 

经过媒体查询

三种写法

一、直接在CSS中使用

写法： @media 类型（常选all/screen）and (条件1) and (条件2){

             CSS选择器{

             CSS属性值

               }

             }

这里面的，第一个 screen 意思为屏幕，这里面还有许多参数，包括all（用于全部设备）、print（用于打印机和打印预览）、speech（应用于屏幕阅读器等发声设备）。 一般直接写all。

使用and来并列显示多种状况，min-width 和max-width 来定义在那种尺寸的屏幕上显示，这就是响应式的灵魂。

注意：在写中间值的时候，必须把最大和最小范围都标注上。

 

二、使用link连接CSS,media属性能够设置媒体查询方式：

<link rel="stylesheet" type="text/css" href="CSS文件夹/02-响应式布局.css"
media="all and (max-width: 800px)"/>

注意：使用此方法时，在style标签中就不能写样式了。否则此方法就会失效。

 

三、使用import导入，直接在url()后面使用空格，间隔媒体查询规则：（不太经常使用）

 @import url("css/02-响应式布局.css") all and (max-width: 800px);

 

优势：如今大部分的响应式布局都是使用@media 来实现的，能够书写大量的公共样式，在须要适应屏幕的时候，在大括号内加入相应的功能便可实现响应式布局。

缺点：可能须要对同一个类书写不一样的样式，代码比较繁复，难度也稍微难点。

 

 

 

使用JS引用不一样的CSS值

 

根据不一样浏览器：

<script type="text/javascript">

var version = navigator.userAgent;

if (version.indexOf("MSIE") > 1) {

document.write("<link href='ie.css' rel='stylesheet' type='text\/css'\/>");

} else if (version.indexOf("Chrome") > 1) {

document.write("<link href='chrome.css' rel='stylesheet' type='text\/css'\/>");

} else if (version.indexOf("Firefox") > 1) {

document.write("<link href='ff.css' rel='stylesheet' type='text\/css'\/>");

}

</script>

 

根据不一样分辨率：

<script type="text/javascript">

if (screen.width == 1024){

document.write("<link href='css/css1.css' rel='stylesheet' type='text\/css'\/>");

}else {

document.write("<link href='css/css2.css' rel='stylesheet' type='text\/css'\/>");}

</script>

 

 

 

---

 

应用开发中实际使用

 

没有哪种方法是完美的，推荐的是三种方法交替使用，在恰当的地方使用恰当的方法。

在布局过程当中，通常都是宽度的百分比与媒体查询交替使用的，而且在加载网页以前，加入meta标签，定义一下viewport的内容，这样更方便于移动端的响应。也兼顾了设备的兼容性。

而响应式的设计方案的通常作法就是根据目标用户的访问设备的主要类型作三种或四种布局。每种布局有一个区间，好比说小屏的手机分分辨率能够设定为[320,640]。而后分别设计每种布局便可，通常来讲，各个布局主要是调整模块的排列布局顺序，内容调整越少越好（尽可能减小用户适应成本）。