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

最新推荐文章于 2024-07-12 02:12:35 发布

7Maggie_C

最新推荐文章于 2024-07-12 02:12:35 发布

阅读量1.1k

点赞数 1

分类专栏： Web前端 CSS HTML 文章标签： Web前端 CSS HTML

本文链接：https://blog.csdn.net/qq_36770641/article/details/79587807

版权

20 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

所谓响应式页面，即集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

只需在<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%，来禁止缩放。

关注

专栏目录