HTML响应式布局
2019/07/29 10:00 于 天天向上 0
出现背景：比如，篇幅很长的文章在手机端预览时，会出现很长的横向滚动条。
基本定义：为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之，就是一个网站能够兼容多个终端。
根本宗旨：写一次代码，跑在一万种设备上
核心思想：不就是设置宽度么？
实现方式：根据不同设备，设置不同CSS样式，设置该设备支持的页面宽（高）。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>响应式布局</title>
<!--
当设备最大宽度大于320px时，不再使用 mobile.css的样式
即：设备宽度在320px以内时，使用移动端样式，mobile样式
-->
<link rel="stylesheet" href="css/pc.css" media="only screen and (min-width:1200px)"/>
<link rel="stylesheet" href="css/pc_zd.css" media="only screen and (min-width:980px) and (max-width:1199px)"/>
<link rel="stylesheet" href="css/pad.css" media="only screen and (min-width:768px) and (max-width:979px)"/>
<link rel="stylesheet" href="css/shouji.css" media="only screen and (min-width:480px) and (max-width:767px)"/>
<link rel="stylesheet" href="css/mobile.css" media="only screen and (max-width:479px)"/>
</head>
<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">
<div>
<p>
响应式布局
</p>
</div>
<div></div><div></div><div></div></body>
</html>盘古文化研究会 广东．清远
