如何实现响应式布局？

Posted 2020-10-13 沐绒

 

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

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

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

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

1、响应式布局的优缺点

2、可实现的几个方式

①百分比自适应布局

②通过媒体查询

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

3、应用开发中实际使用

 

---

 

响应式布局的优缺点

1、优点：

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

 

2、缺点：

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

 

---

 

 

可实现的几个方式

百分比自适应布局

1、首先允许网页宽度自动调整

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

 

　  代码：　　

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

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

 

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

     由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

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

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

 

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

 

优点：简单方便

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

 

 

 

 

通过媒体查询

三种写法

1、直接在CSS中使用

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

             CSS选择器{

             CSS属性值

               }

             }

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

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

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

 

2、使用link链接CSS,media属性可以设置媒体查询方式：

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

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

 

3、使用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]。然后分别设计每种布局即可，一般来说，各个布局主要是调整模块的排列布局顺序，内容调整越少越好（尽量减少用户适应成本）。