欢迎光临万书涛的个人博客

响应式布局有几种方法,优缺点是什么

作者:万书涛  / 日期:2020-08-10 19:36:49 /  来源:本站原创 /   浏览:
摘要
响应式布局是指只需要开发一套模板,然后通过css或者一些布局框架来实现一套模板同时适配pc端、手机端、平板端等设备,那么响应式布局都有哪些方式呢?下面万书涛来谈谈这个问题。  
1. 通过bootstrap框架来实现响应式
bootstrap是近年比较流行的响应式布局框架,支持html5,其宗旨就是以移动端为优先开发,它的栅格系统对于响应式开发比较方便,只需要加一个布局容器:
<div class="container"></div>,通过栅格系统的md sm等来划分不同大小比例,这样设备就会根据不同栅格大小让元素自动适用于不同的设备,万书涛也用过bootstrap开发过一些响应式模板,来说说优缺点
 
优点:
方便开发,系统自动实现了一些布局栅格系统,所以我们只需要根据页面元素大小比例选择合适大小栅格就可以了,同时bootstrap还带有很多图标和字体,方便了我们开发,而且可以免费使用。
 
缺点:
1. 有些地方不灵活,比如,导航部分,一级导航那里,bootstrap只有点击出现下拉菜单,而没有滑动下拉菜单这一项,而且移动端点击一级导航是不能够进入相关页面的,只能出现下拉二级菜单。
2. bootstrap自带很多样式,比如元素边距等等,有的时候会自动出现我们不想要的样式,可能找了半天都不知是哪里的原因,还要我们逐渐改动这些样式,无形中增加了劳动力。
 
总之,bootstrap是一个方便响应式开发的框架,对于一般的开发来说是能够简化一定的劳动力的。
 
 
2. 通过media screen媒体查询来实现
这个可以说是目前响应式网站开发必备的一个功能,包括前面所说的bootstrap,也离不开media screen的理论支持,media screen的理论是针对不同的设备,分别写一套相应的css,常用的设备宽度有手机端480,平板电脑768,大型平板1024,以及Pc端1200等等,代码示例格式如下:
 

@media screen and (max-width: 1200px)
{
.qlcontent .lcon{     width: 73%;
    float: left;
}
 
.qlcontent .rcon{ width:26%;}
}
 
@media screen and (max-width: 1024px)
{
.qlcontent{ max-width:1024px;}
  .qlnav{
  position: relative;
  
  }  
 
@media screen and (max-width: 768px)
{
.qlcontent{ max-width:1024px;}
  .qlnav{
  position: relative;
  
  }  
 
@media screen and (max-width: 480px)
{
.qlcontent{ max-width:1024px;}
  .qlnav{
  position: relative;
  
  }  
 
 
以上代码通过设置max-width来区分不同设备的css样式,比如max-width: 768px这个,表示在最大宽度768像素下,对应的css样式是什么样子的,同样,最大宽度480像素表示针对的是移动端设备,最终实现不同设备自动调用不同的样式,比如,万书涛的个人博客下的个人博客模板都是通过这种方式来实现的,效果如下图一:通过图一可以看出在不同的设备,通过设置相应的css样式可以实现不同设备显现不同的样式效果。

响应式布局案例截图

3. 通过vw和vh来实现
这种布局方式可以说是百分比的进化方式,因为如果使用百分比布局的话,如果父窗口不设置具体宽和高,子窗口即使设置百分比,也会出现高度不统一的情况,特别是图片列表,有时想要在不同分辨率下统一高度,如果使用百分比,是比较难办的,这个时候,可以设置vw或者vh,来固定总得宽和高,这个vw是相对于视窗的宽度,然后其他元素就相对与固定元素的百分比来实现具体宽和高,因为我们无论如何缩小放大窗口,只要针对窗口的比例不变,元素的高度就是统一的,这个在一些列表页中,带有图片的地方用的比较多,具体案例可以看这篇文章:《网页图片列表随着窗口变化出现错位导致页面变形通用解决方法》。
 
 
4.通过百分比%来实现
响应式布局很多地方都用到百分比,因为既然是响应式,必然面临一个相对宽度的问题,针对不同设备的大小,通过设置一定的百分比,来实现相对大小,比如,万书涛开发制作的《清爽紫罗兰帝国cms个人博客模板》,这个模板很多地方采用的百分比,像是下图中的图片列表,就是采用的百分比,这样随着窗口大小的缩小或者放大,图片也跟着放大和缩小

响应式布局百分比案例截图

5. rem布局和其他框架布局
rem布局严格意义上来说不属于响应式布局,它只是一个相对单位,是相对于px的一种单位,用在移动端布局比较多,最大用处是在字体方面用的比较多,比如,在最外层父级设置1rem=14px,这样的话,后面子单位的字体只需要设置成多少rem就可以,这样就可以相对父单位自动增大和缩小了。
比如,设置body 层或者html层font-size:14px,表示1rem=14px.后面就可以用rem单位了
 

@media screen and (max-width: 1200px)
{
.qlcontent .lcon{     width: 73%;
float: left;
font-size:1.1rem
}
 

}
 
@media screen and (max-width: 1024px)
{
.qlcontent{font-size:1rem
}

用这个的好处是:在不同设备上,通过设置根font-size的不同大小,子元素的rem自动放大和缩小
 
以上就是万书涛总结的响应式布局的几种方法,也是目前比较常见的方法,希望对大家了解响应式布局有一定的帮助   
 
 
所属分类: 响应式布局  网站建设心得 
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/grbkjc/107.html
如需转载,须以文字形式注明本文地址,否则禁止转载

猜你喜欢

无相关信息