HTML5学习_day12(3)--响应式布局

最新推荐文章于 2022-08-08 14:53:38 发布

woaiwanshumen

最新推荐文章于 2022-08-08 14:53:38 发布

阅读量843

点赞数

分类专栏： HTML5零基础学习笔记文章标签： html5 响应式布局

本文链接：https://blog.csdn.net/woaiwanshumen/article/details/52799824

版权

这篇博客介绍了HTML5响应式布局的基本步骤，包括在head标签内设置meta标签，使用媒体查询来定义不同屏幕尺寸的样式，并强调了在设计响应式布局时要注意使用百分比和响应式图片技巧。

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

响应式布局设计的一般步骤

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

meta query 是响应式设计的核心，它能够跟浏览器进行沟通，浏览应该呈现什么样的布局。

iphone3gs

当屏幕小于320px时执行里面的样式

@media only screen and (min-width: 100px) and (max-width: 320px) {

选择器{

样式

}

例子：

样式{----} 这里的样式在下面情况都不匹配时，使用这个样式。

@media only screen and (max-width: 320px){css样式} 这个样式在浏览器宽度小于320px适用

@media only screen and(min-width: 320px) and (max-width: 480px) { css样式 }这个样式在浏览

关注