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>