HTML响应式布局第二章页面美化（1）

peaceandjoy123

已于 2022-11-18 18:21:40 修改

阅读量266

点赞数

文章标签： html 前端 css

于 2022-11-11 20:36:40 首次发布

本文链接：https://blog.csdn.net/tan_tantan123456/article/details/127811406

版权

本文探讨了HTML响应式布局的优势和挑战，包括灵活性强、多设备适应，但同时面临工作量大、效率低下的问题。通过使用标签设定浏览器视口和媒体查询来优化移动端展示。媒体查询的语法和应用方式被详细阐述，包括在样式表内嵌和中使用。此外，文章还介绍了弹性布局和多列布局作为响应式设计的实现方法。

摘要由CSDN通过智能技术生成

响应式的优点：

面对不同分辨率设备时，灵活性较强

能够快捷解决多设备显示适应问题

响应式缺点：

兼容各种设备，工作量大，效率低下

代码累赘，会出现隐藏无用元素，加载时间加长

一定程度上改变了网站原有的布局结构，会出现页面混乱的情况

响应式设计是一种折中性质的设计解决方案，因多方面因素影响而达不到最佳效果

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

content="width=divice-width,

initial-scale=1.0,

maximum-scale=1.0,

user-scalable=0">

视口属性
属性	说明
width	设置layout viewport的宽度为一个正整数或字符串“width-device”
initial-scale	设置页面的初始缩放值为一个数字，可以带小数

关注