vue/原生页面实现响应式布局
在现在开发的时候,公司要求一套代码适配pc端,移动端的需求也日渐增加,所以我们也就需要让代码实现响应式的效果。这里我已知的方法有两个,当然大佬除外。
一:使用CSS3的@media查询
1.1首先我们进行百度搜索
定义和使用
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
当然用着效果还是不错。
.img { width: 100%; height: 15.25rem; } @media screen and (max-width: 700px) { .img { width: 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根据官网的引入教程,和实例进行开发
官网里面在每个版本中都会有教程,叫你如何使用,也有不少的组件提供给大家。