响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

  • 优点

    面对不同分辨率设备灵活性强

    能够快捷解决多设备显示适应问题

  • 缺点

    兼容各种设备工作量大,效率低下

    代码累赘,会出现隐藏无用的元素,加载时间加长

    其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

    一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

想要开发一个响应式的页面,我们需要做如下准备。

视口 viewport

1、 什么是 Viewport

pc端页面得尺寸一般都是大于980px尺寸,有的网站并没有开发移动端得页面,但是手机端却能显示pc端的页面比如

这是因为手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”比屏幕宽(如果不设置为980px),这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局,可以把pc端页面正常的展示到浏览器当中),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最先引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器相继支持。
pc端的页面能正常的展示到移动端浏览器当中,但页面会被缩放,对用户体验不是很好,那么我们有没有一种方法,pc端能正常展示,而移动端也能正常展示呢,答案是有的,媒体查询加视口。
2、 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">

meta 是给浏览器识别的
width:控制 viewport 的大小,可以指定的一个值,如600,或者其它特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放

【viewport参考】

媒体查询

响应式布局的含义是:一个页面,针对不同屏幕的尺寸,可以得出不同的显示效果。当你缩放的时候,页面会自动伸缩,无论是在手机端,Pad,电脑端的屏幕,都能很好的展现。

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

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

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

语法:

@media mediatype and (media feature) {
  CSS-Code;
}

解释:

mediatype 表示媒体查询类型:可选参数 screen 用于电脑屏幕,平板电脑,智能手机等,其它的不是废弃就是少见

media feature 媒体功能,常用的有:

  • max-width 定义输出设备中的页面最大可见区域宽度
  • min-width 定义输出设备中的页面最小可见区域宽度
  • max-height/min-height
  • orientation 检测设备目前处于横向(landscape)还是纵向(portrait)状态
  • max-/min-/aspect-ratio 检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)

更多类型请查询: @media"target="_blank">MDN

<!-- 例如:有的 screen 前面有 only -->
@media screen and (max-width: 1200px) {
    .box {
        background-color: yellow;
    }
}
<!-- screen 可以省略,填上screen 是告知设备在打印页面时使用衬线字体,在屏幕上显示时用无衬线字体。但是目前很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印,可以写成这种形式 -->
@media (min-width: 960px){
  .box {
      background-color: yellow;
  }
}
<!-- 也可以连写:表示当页面宽度大于960 或者 小于1200的时候执行内部代码 -->
@media screen and (min-width:960px) and (max-width:1200px){
    .box {
        background-color: yellow;
    }
}

只写min-width的时候,需要注意书写顺序,最小屏在最上面,同理,max-width相反

也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and (media feature)" href="mystylesheet.css">

<!-- 例如:当设备宽度小于 1200px 使用外部样式 -->
<link rel="stylesheet" media="(max-width: 1200px)" href="style.css">

兼容IE

因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

针对的情况是:使用IE9的浏览器,但是浏览器的文档模式却是IE8,所以写上下面的代码,保证IE的文档模式始终是最最新的

<meta http-equiv="X-UA-Compatible" content="IE=edge">

也可以写成:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。建议用上,不用也可以。

屏幕尺寸区分

/*一般按照768px作为区分 小于768则认为是移动端*/
@media (max-width: 768px){
    .banner{
        display: none;
    }
    .banner-m{
        display: block;
    }
}
/*
    响应式的临界值分为 
    1  xs(超小屏幕)   <768px
    2  sm(小屏幕)     768   992
    3  md             992   1200
    4  lg             >1200
*/

参考界面

文档更新时间: 2021-09-13 15:46   作者:朱老师