移动端web页面响应式布局（文字、图片、表格）

最新推荐文章于 2024-03-20 14:23:35 发布

VIP文章 Ada5899

最新推荐文章于 2024-03-20 14:23:35 发布

阅读量2k

点赞数 2

分类专栏： html 文章标签： html css js web

本文链接：https://blog.csdn.net/Ada5899/article/details/105805290

版权

移动端web页面响应式布局

絮絮叨叨：最近被领导抓去写了个前端页面，还要是适应移动端的。。还三天要完成。。前端小白

的我硬生生刚出来了，这两天正好闲了点，总结总结。

设置meta
写过前端的小伙伴们应该对这个会比较眼熟，这是在html头部里的配置。

	<head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    	<title>自适应</title>
    </head>

解释一下这个meta：

属性	说明
viewport	移动端上用来显示网页的区域
width	可视区域的宽度，移动设备用来显示网页的宽度，值可以是数字或是关键词device-width，即根据设备宽度来设置显示网页的宽度
height	与width相同
intial-scale	页面的初始缩放值，值为数字。1.0表示按实际尺寸显示，无任何缩放
minimum-scale	允许用户的最小缩放值，值为数字
maximum-scale	允许用户的最大的缩放值，值为数字，1.0表示不允许用户缩放到实际尺寸值上
user-scalable	是否可对页面进行缩放，值为"no"表示禁止缩放，值为"yes"表示允许

利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的font-size。

    <script type="text/javascript">
        (function (doc, win) {
    
            var docEl = doc.documentElement,

最低0.47元/天解锁文章

Ada5899

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
移动端web页面响应式布局（文字、图片、表格）

移动端web页面响应式布局絮絮叨叨：最近被领导抓去写了个前端页面，还要是适应移动端的。。还三天要完成。。前端小白的我硬生生刚出来了，这两天正好闲了点，总结总结。设置meta写过前端的小伙伴们应该对这个会比较眼熟，这是在html头部里的配置。 <head> <meta charset="UTF-8"> <meta name="view...
复制链接

扫一扫