《响应式Web设计:HTML5和CSS3实战》 读书笔记

时间:2014-02-14 10:28:19   收藏:0   阅读:378

第一章  响应式设计入门

  直到现在网页的设计还在960px,这种设计在一些低分辨率的显示器正常,而在高分辨率下会留出两边空白.

 

一、布局种类

  1、流式布局  2、弹性布局  3、朔料布局  4、自适应布局

 

二、视口和屏幕尺寸

  视口:指浏览器内部的显示内容的部分,不包括工具栏导航栏之类.

  屏幕尺寸:指设备的尺寸,如显示器、手机屏幕.

 

 

第二章  媒体查询:支持不同的视口

 

bubuko.com,布布扣
 1 <style>
 2 /* 大于1024时执行下面代码 */
 3 @media all and (min-width: 1024px) {
 4     .box { height:400px; background-color:#CCC; }
 5 }
 6 
 7 /* 小于768时执行下面代码 */
 8 @media all and (max-width: 768px) {
 9     .box { height:200px; background-color:#E3D6BF; }
10 }
11 </style>
bubuko.com,布布扣

原文:http://www.cnblogs.com/couxiaozi1983/p/3548438.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!