第一站 - 轻松上网从此开始!

上网第一站

当前位置: > 运营 >

响应式布局这件小事 有哪些优点和缺点该怎么设计?(2)

时间:2012-11-15 14:58来源:网络 作者:仰望星辰 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化,当然你可以再多设置几个尺寸的监测层叠样式表,这样子

  通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化,当然你可以再多设置几个尺寸的监测层叠样式表,这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果,我们往往还要格式化一些CSS属性的初始值:

/* 禁用iPhone中Safari的字号自动调整 */

html {

-webkit-text-size-adjust: none;

}

/* 设置HTML5元素为块 */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

display: block;

}

/* 设置图片视频等自适应调整 */

img {

max-width: 100%;

height: auto;

width: auto\9; /* ie8 */

}

.video embed, .video object, .video iframe {

width: 100%;

height: auto;

}

  最后要注意的是在页面的头部之间加上下面这句∶

<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

  meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

  参数设置∶

  width – viewport的宽度

  height – viewport的高度

  initial-scale – 初始的缩放比例

  minimum-scale – 允许用户缩放到的最小比例

  maximum-scale – 允许用户缩放到的最大比例

  user-scalable – 用户是否可以手动缩放

  最后对于在IE浏览器中不支持media query的情况,我们可以使用Media Query Javascript来解决,只需要在页面头部引用css3-mediaqueries.js即可。示例:

<!--[if lt IE 9]>

<script src=“”>

</script> <![endif]-->

  好了,响应式布局的小事就这么多,如你有好的补充意见或不同的见解,可以联系我,我们一起探讨这件小事……

  来源:觉唯前端

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
收藏文章
表情删除后不可恢复,是否删除
取消
确定
图片正在上传,请稍后...
评论内容为空!
还没有评论,快来抢沙发吧!

热评话题

按钮 内容不能为空!
立刻说两句吧! 查看0条评论
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕