CSS响应式布局学习笔记一

时间:2020-10-13 作者:WilliamChan

概念

响应式布局的网站可以兼容多个终端,针对不同终端设备不同的样式,设备不同时显示不同。
优点:

  1. 面对不同分辨率设备灵活性强;
  2. 能够快捷解决多设备显示适用问题;

缺点:

  1. 兼容各种设备,效率低下;
  2. 代码累赘;

实现响应式布局的三种方式

  1. CSS3-Media Query(最简单的方式,但是无法满足很多需求)
  2. 借助原生Javascript(成本高,不推荐使用)
  3. 第三方开源框架(比如bootstrap,可以很好的支持浏览器的响应式布局)

设置meta标签

在完成非响应式布局后,需设置meta标签来告诉浏览器,让视口宽度等于设备宽度,而且禁止用户缩放行为。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

这里视口的设置需要注意的是,视口就是可见的屏幕尺寸;设置视口时只设置宽度,而不在乎高度,这是因为高度由内容自动撑开。

具体含义如下:

  1. Width: 控制viewport的大小。如device-width为设备的宽度。
  2. initial-scale: 初始缩放比例,页面第一次加载时的缩放比例。
  3. maximum-scale 允许用户缩放到的最大比例,范围从0到10.0
  4. minimum-scale: 允许用户缩放到的最小比例,范围从0到10.0
  5. user-scalable: 用户是否可以手动缩放,值可以是: [yes | no]

以上就是知道不介绍的《CSS响应式布局学习笔记一》,希望对你有所帮助。

接下来您可以看一下篇《CSS响应式布局学习笔记二》

声明:若您对本文内容有任何意见,欢迎发送邮件至:admin@zhidaobu.com,本站会尽快回应并做出相应处理。