码迷,mamicode.com
首页 > Web开发 > 详细

响应式网页设计初探

时间:2017-07-13 15:59:30      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:sel   参考   帮助   简单   针对   enum   默认   高度   cal   

我首次接触响应式网页设计还要从应用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

 

响应式网页设计初探

标签:sel   参考   帮助   简单   针对   enum   默认   高度   cal   

原文地址:http://www.cnblogs.com/linyihai/p/7160320.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!