<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
响应式布局：一个网站兼容多个终端
优点：面对多个不同设备 灵活性非常强
能够快捷的解决多个设备显示的适应问题
缺点：只适合中小型网站
兼容各种设备工作量大 ，效率低下
原理：通过媒体查询来定制某个宽度区间的网页布局
媒体查询：能够检测设备的宽度，通过不同 的宽度显示不同的样式
超小屏幕（移动设备）768px以下
小屏屏幕（平板设备）768-992px
中屏屏幕（标屏电脑）992-1200px
大屏屏幕（宽屏电脑）1200px以上
媒体查询的语法：@media screen and (max-width:768px) and (min-width:320px){ 样式代码}
@media 媒体类型（all） 关键字 媒体条件{样式代码}
-->
</body>
</html>
响应式布局
最新推荐文章于 2022-03-28 19:59:13 发布
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
