简单说说响应式布局！！！响应式布局分为两种（1）针对PC端的自适应屏幕尺寸，屏幕尺寸多以px像素作为高宽的定义标准，因此常以px作为宽高的属性值单位在编码中。这样就导致了不同屏幕的不同高度和宽度，html标签元素的布局不同，从而无法达到编码的初始效果。当用户调整浏览器界面的高度和宽度时，也需要适配。（2）PC端与移动端的适配PC端与移动端的适配是很多网站需要解决的问题。为了达到一个目的，用户在PC端访问网站是一个版本的界面，而通过手机端访问网站是另一个版本的界面。网站的大体界面不会发生变化，但导航栏或侧边栏等小部分会被隐藏、缩小等变化。响应式布局实现（1）对于PC端屏幕尺寸的适配，主要是使用css完成PC端的屏幕适配，只说了思路，没有具体的代码实现。常规布局：margin+padding+float+width+height。在dramas或者其他布局中实现元素适应屏幕宽度的布局，不能使用px作为属性值单位，而是使用%作为属性值单位。标签定义了%属性值单元的css属性后，会以最近的父标签为准。计算%的值。这种%的写法可以在用户调整浏览器的宽度后，自适应改变label元素占用浏览器的大小。另外，在用户调整屏幕宽度后，一行中放不下的元素会被换行。需要了解的是，屏幕宽度的单位是px。当px一行元素总和超过px屏幕宽度时，右边多余的元素会自动换行。.但是如果只有一个元素，浏览器会显示水平滚动条。flexlayout: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中，放在mounted(){}中。*/方法二：判断用户设备的屏幕宽度，修改网站。开发如何根据用户设备的屏幕宽度来显示网站的界面。与方法1相比，该方法既有优点也有缺点。好处是当用户是电脑设备、竖屏手机、横屏手机、平板电脑时，可以根据屏幕宽度显示网站最佳界面。.可以最佳地实现用户体验。缺点是代码比较复杂，需要考虑不同屏幕宽度的处理代码。代码如下：if(window.screen.width<400){//这里是屏幕宽度为0-400时的界面修改}elseif(window.screen.width<800){//这里是当屏幕宽度为400-800界面修改}else{//此处屏幕宽度>800时界面修改}
