响应式布局
出现背景:比如,篇幅很长的文章在手机端预览时,会出现很长的横向滚动条。基本定义:为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之,就是一个网站能够兼容多个终端。
根本宗旨:写一次代码,跑在一万种设备上
核心思想:不就是设置宽度么?
实现方式:根据不同设备,设置不同CSS样式,设置该设备支持的页面宽(高)。
viewport
另外,在此之前,我们需要在head里设置一个meta标签,viewport,来设置移动端自适应
ViewPort详细信息,可参考此处:浅谈meta viewport
附上代码
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
设置viewport 声明内容为width为设备宽度,device-width;原始缩放比例1.0
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>响应式布局</title>
<!--
当设备最大宽度大于320px时,不再使用 mobile.css的样式
即:设备宽度在320px以内时,使用移动端样式,mobile样式
-->
<link rel="stylesheet" href="css/common.css" media="(min-width:500px)"/>
<link rel="stylesheet" href="css/mobile.css" media="(max-width:500px)"/>
</head>
<body>
<div>
<p>
响应式布局
基本定义:为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之,就是一个网站能够兼容多个终端。
根本宗旨:写一次代码,跑在一万种设备上
核心思想:不就是设置宽度么?
实现方式:根据不同设备,引用不同CSS样式,设置支持的宽。
</p>
</div>
</body>
</html>
common.css:
body{
font-style:italic ;
}
div{
color: Green;
}
p{
padding: 5px;
}
mobile.css:
body{
font-style:normal;
color: red;
}
p{
padding: 20px;
}
以上两种css代码只是做测试用:在浏览器中F12后,改变页面宽度,来看看效果。宽度分别大于500px:
扫描二维码关注公众号,回复:
2513459 查看本文章
小于500px: