移动前端——通过CSS3 Media Queries实现相应式布局
一、关于Media Queries模块
Media Queries模块,该模块允许添加媒体查询表达式,用以指定媒体类型,然后根据媒体类型来选择用该使用的样式。
二、Media Queries的使用方法
@media 设备类型 and (设备特性) {样式代码}
——设备类型——常用all(所有设备)/screen(电脑显示器)/handheld(便携设备)
——设备特性——常用浏览器的宽度如:min-width:**px / max-width:**px;
三、关于safari
由于safari在显示页面时是将窗口宽度作为980px进行显示的,因此在使用Media Queries模块时需在head内加入<meta name="viewport" content="width=device-width">,使页面按照相应的媒体类型样式显示。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。