摘要: 开始研究响应式web设计,CSS3 Media Queries是入门。Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。那么,Media Queries是如何工作的?两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件:意思是当屏幕的宽度大于等于400px的时候,应用styleA.css在media属性里:screen是媒体类型里的一种,CSS2.1定义了10种媒体类型and被称为关键字,其他关键字还包括not(排除某种设备),only(限定某种设 阅读全文
posted @ 2013-09-13 11:27 @敏敏 阅读(132) 评论(0) 推荐(0) 编辑
摘要: 经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}}@medi 阅读全文
posted @ 2013-09-13 11:23 @敏敏 阅读(439) 评论(0) 推荐(0) 编辑