正在加载今日诗词....

小整个响应式

以前用bootstrap的时候,觉得用它特好的一点是它有响应式,相当方便,其实不用bootstrap也可以很容易实现网页响应式,也终于让自己写了点代码了,主要想在手机上可以看得舒服点~~欢迎用手机访问本站!

1.在<head>标签里加入这个meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">
参数说明:
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例
maximum-scale:允许用户缩放到的最大比例
minimum-scale:允许用户缩放到的最小比例
user-scalable:用户是否可以手动缩放

我比较喜欢加上一些参数,下面的意思是让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放,网页会因此显得更高细腻。

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

2.媒介查询-Media Queries

/* 大屏幕 */
@media (min-width: 1200px) { ... }

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }

/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

通过这些不同尺寸的定义就能很好的控制不同移动设备的显示效果,基本上,宽度一般都把像素值设置为百分比以使得容器大小自适应。

参考文章

  1. http://webdesignerwall.com/tutorials/css3-media-queries
  2. http://blog.csdn.net/hfahe/article/details/7082718/
  3. http://java-mans.iteye.com/blog/1639503
暂无评论
发表新评论

* 号为必填项

  • 本文统计
  • 写于2013年6月27号
  • 修改于 2018年7月31号
  • 包含 319 个字和 0 张图片
  • 已阅读 2735 次