支付宝赞助帐号:service@kuitao8.com 

html5响应试布局

Created2014-11-28   Views 2696    Author 懒人程序
l  禁止用户缩放页面【设置屏幕按11的尺寸显示】

   <meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

<metaname="HandheldFriendly"content="true">

 

l  定义输出设备的屏幕可见宽度

一般:#primary 是主要内容区域,#secondary是侧栏。

/* Tablet Landscape */

@media screenand (max-width: 1060px) {

    #primary{ width:67%; }

    #secondary{ width:30%; margin-left:3%;} 

}

 

/* Tabled Portrait */

@media screenand (max-width: 768px) {

    #primary{ width:100%; }

    #secondary{ width:100%; margin:0; border:none; }

}

 

本特性接受minmax前缀,因此可以派生出min-device-widthmax-device-width两个媒体特性。

(待续)

上一篇: HTML5表单及其验证
下一篇: html5 javascript视频教程百度网盘下载
支持键盘 ← →

邮件订阅

订阅我们的精彩内容