响应式网站中用法详解

2025-11-21 13:21:23

1、首页新建一个HTML5页面，如图

响应式网站中用法详解

2、需要手动在<head>头区域，加入viewport声明，示例：

响应式网站中用法详解

3、其中，viewport声明中，content=""属性有5个参数可供设置，分别是：

width="deive-width",

initial-scale=1.0,

minimum-scale=0.8,

maximum-scale=1.5,

user-scalable=no

响应式网站中用法详解

4、其中，第一个参数width 和第二个参数initial-scale 较为重要，

width=device-width, 指明了网页的宽度默认等于用户设备的屏幕宽度

initial-scale=1.0, 指明了网页的初始化宽度实际所在屏幕宽度的比例，取值范围为0.1-1.0，即10%-100%

响应式网站中用法详解

5、其余三个参数的，意义分别为：

minimum-scale=0.8, 指明了网页最小允许缩小到屏幕80%的宽度

maximum-scale=1.5, 指明了网页最大允许放大到屏幕150%的宽度

user-scalable=no, 指明了网页禁止用户缩放，允许用户缩放则使用yes

响应式网站中用法详解

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。