响应式网页设计初探

Posted 2020-09-28 lyh225

我首次接触响应式网页设计还要从应用bootstrap说起。我们运用bootstrap的网格类简单的将响应式设计带入我们的网页设计当中，当然bootstrap框架其实还做了其他事情以支持网页响应式设计。现在，就让我们一窥响应式网页设计背后的原理。

实现响应式设计的前提:允许网页缩放

<meta name="viewport" content="width=device-width, init-scale=1.0">

视口的 meta 标签，重写了默认的视口，并帮助加载与特定视口相关的样式。

width 属性设置屏幕宽度。它包含一个值，比如 320，表示 320 像素，或者值为 ‘device-width‘，用来告诉浏览器使用原始的分辨率。

initial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈现设备的原始宽度。

 

实现响应式设计的核心：CSS3的媒体查询

自动探测屏幕宽度，选择加载相应的CSS文件。

常用于布局的CSS Media Queries有以下几种

设备类型(media type):

all所有设备
screen 电脑显示器
print打印用纸或打印预览视图
handheld便携设备
tv电视机类型的设备
speech语意和音频盒成器
braille盲人用点字法触觉回馈设备
embossed盲文打印机
projection各种投影设备
tty使用固定密度字母栅格的媒介，比如电传打字机和终端

设备特性(media feature):

width浏览器宽度
height浏览器高度
device-width设备屏幕分辨率的宽度值
device-height设备屏幕分辨率的高度值
orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape
aspect-ratio比例值，浏览器的纵横比
device-aspect-ratio比例值，屏幕的纵横比

example:

1. /* for 240 px width screen */
2. @media only screen and (max-device-width:240px){
3. selector{ ... }
4. }

1. /* for 320px width screen */
2. @media only screen and (min-device-width:241px) and (max-device-width:320px){
3. selector{ ... }
4. }

1. /* for 480 px width screen */
2. @media only screen (min-device-width:321px)and (max-device-width:480px){
3. selector{ ... }
4. }

 

其他知识

1 CSS 不使用绝对宽度，而用百分比宽度

.p {width:80%}

2 字体不使用px为单位，改用em单位

3 针对不同宽度的设备，实现图片的自适应加载

 

参考连接：

1.https://isux.tencent.com/responsive-web-design.html

2.http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

3.http://www.runoob.com/bootstrap/bootstrap-v2-responsive-design.html