vueweb端响应式布局_web前端响应式布局的两种方式

简单讲一下响应式布局！！！

响应式布局分为两种

(1)对于pc端屏幕尺寸的自适应

屏幕尺寸多为px像素为高度宽度的定义标准，故在编码中也多以px为width，height的属性值单位。这就产生了对于不同屏幕的不同高度宽度而产生了html标签元素布局的不同，从而不能达到编码预初的效果。用户将浏览器界面高度宽度调整时也需要进行自适应。

(2)对于pc端和手机端的自适应

pc端和手机端的自适应是很多搭建网站需要解决的问题。要达到一个目的，用户在用pc端访问网站是一版界面，而用手机端访问网站是则是另一版界面。网站的大致界面不会发生变动，但小部分例如navbar或者是侧边栏等会有隐藏、缩小等变化。

响应式布局实现

(1)对于pc端屏幕尺寸的自适应

主要运用css来完成pc端屏幕自适应，只讲思路不讲具体代码实现。

常规的布局：margin+padding+float+width+height。

要达到元素随屏宽自适应剧中或等布局，不能使用px为属性值单位，要使用%为属性值单位，在标签定义了%属性值单位的css属性之后，会根据最近的父标签来计算%的值。这种%的写法可以用于在用户调整了浏览器宽度后，适应性地改变标签元素所占浏览器的大小。

另外要达到在用户调整了屏宽之后，一行中放不下的元素进行换行处理，要理解屏宽的单位是px，当一行的元素总和px超过屏宽px时，右侧超出的元素会自动换行。但如果只有一个元素，浏览器则会出现横向滚动条。

flex布局：display:flex是一种整合完毕的自适应布局，可以完成一整套的自适应布局，但无法用于复杂的自适应布局。对于一些简单的界面自适应可以一用，flex自带多种布局方式，可定义在父元素以及子元素的css样式中。此处不加以讲解flex用法。

(2)对于pc端和手机端的自适应

只讲解如何适应pc端和手机端。对于布局的基础以及常用代码此处不做过多解释。

方法一：制作一版pc端界面。判断用户进入网站时的设备，在确定用户使用手机端后修改pc端界面中的部分内容，达到适应手机端的效果。(推荐用此方法，简单实用)判断代码如下

if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {

// 这里是手机端用户进入网站后的界面改动

} else {

// 这里是电脑端用户进入网站后的界面改动

}

/*

在原生js中，以上代码建议放在body尾部或者onload()中，在加载完要处理的huml后再操作节点。

在vuejs中，放在app.js中放在mouted(){}中。

*/

方法二：判断用户设备的屏幕宽度而做网站的修改操作。根据用户的设备屏宽来制定如何展示网站的界面。

此方法相对于方法一有优也有劣，优点在于当用户是电脑设备、手机竖屏、手机横屏、平盘电脑其中的任何一种，都可以根据屏宽来展示网站最好的一版界面。可以最优地达到用户体验。劣势在于代码相对复杂，要考虑不同屏宽时的处理代码。代码如下：

if(window.screen.width < 400){

// 此处屏幕宽度0-400时的界面修改

} else if (window.screen.width < 800 ){

// 此处屏幕宽度400-800时的界面修改

} else {

// 此处屏幕宽度>800时的界面修改

}