小整个响应式 - 山炮不二

小整个响应式

以前用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) { ... }

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

参考文章

折腾转载二维码 css 响应式自适应

暂无评论

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

2.媒介查询-Media Queries

参考文章

发表评论

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