您的位置：首页 > Web前端 > CSS

Web前端－HTML/CSS－响应式页面的设计

2018-03-16 22:41 681 查看

所谓响应式页面，即集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
只需在<head>标签下添加如下代码：<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">即可实现。（很长对不对，贼烦了，不过我们可以用简写噢，试试输入：meta:vp然后按下Tab键，它就自动出现啦！）老手请忽略这句！

viewport即视口，解释如下：

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值， device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

特别的，若页面中有图片，则还需在<style type="text/css">标签下添加： img{
max-width:100%;
}使图片的最大宽度为100%，来禁止缩放。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Web前端 CSS HTML

相关文章推荐

新的分享

章节导航