vue/原生页面实现响应式布局

在现在开发的时候，公司要求一套代码适配pc端，移动端的需求也日渐增加，所以我们也就需要让代码实现响应式的效果。这里我已知的方法有两个，当然大佬除外。

一：使用CSS3的@media查询

1.1首先我们进行百度搜索

定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

当然用着效果还是不错。

.img {
   100%;
  height: 15.25rem;
}
@media screen and (max- 700px) {
  .img {
     100%;
    height: 6.25rem;
  }
}

我这个写的就是宽度小于700px的时候img的高度变成6.25rem,默认的高度是15.25rem

这是他的部分参数，其他的参数一般也用的较少，需要的可以百度了解一下

1.2引入

引入的话就是跟上面的实例一样的方式，也就是一段是你默认的样式，一段是你改变屏幕后的样式写上去就可以实现效果了。

二：使用常用的Bootstrap响应式设计

2.1下载Bootstrap的css,当然也可以使用地址形式的，但是有时候地址形式的在加载中会出现缓慢的效果

这就是他们的官网 https://www.bootcss.com/

2.2选择你想要的版本

因为它的每个版本有一丝丝不同，但是基本还是差不多的，所以就需要选择好你需要的版本

2.3根据官网的引入教程，和实例进行开发

官网里面在每个版本中都会有教程，叫你如何使用，也有不少的组件提供给大家。