HTML5响应式网页设计【第二章、页面美化（一）】

最新推荐文章于 2022-11-23 15:39:02 发布

原创

最新推荐文章于 2022-11-23 15:39:02 发布 · 1.5k 阅读

标签

#html #css

本文介绍了HTML5响应式网页设计，包括响应式布局的概念和视口设置，详细讲解了媒体查询的用法和设备参数，以及如何在网页中应用。此外，还探讨了弹性布局和多列布局在CSS3中的实现，为创建适应不同设备的网页提供了实用技巧。

全部笔记

2.1.1 响应式布局介绍

2.1.2 视口的概念

移动设备上的视口就是设备的屏幕能用来显示用户网页的那一块区域。具体地说，就是浏览器上用来显示网页的那部分区域

在页面加载时，可以使用meta标签设置浏览器的视口(viewport)的宽度

<meta name="viewport“ content="width=device-width,initial-scale=1.0,maximum-scale=1.0,   user-scalable=0" />

属性名	说明
width	设置layout viewport的宽度为一个正整数或字符串“width-device”
initial-scale	设置页面的初始缩放值为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值为一个数字，可以带小数
height	设置layout viewport的高度为一个正整数或字符串“height-device”
user-scalable	是否允许用户进行缩放，值为“no”或“yes”。no代表不允许，yes代表允许