移动端和pc端，响应式设计布局
1.什么是响应式 Web 设计?
响应式 Web 设计让你的⽹页能在所有设备上有好显⽰。
响应式 Web 设计只使⽤ HTML 和 CSS。
响应式 Web 设计不是⼀个程序或Javascript脚本。
2.响应式的作⽤：设计最好的⽤户体验
友好的⽤户体验是⽹页可以在任何设备上展⽰和操作，设备包括桌⾯系统设备，平板电脑，iPhone等⼿机等。
⽹页应该根据设备的⼤⼩⾃动调整内容。
页⾯的设计与开发根据⽤户⾏为以及设备环境(系统平台、屏幕尺⼨、屏幕定向等)进⾏相应的响应和调整称之为响应式 Web 设计。
3.⾃适应设计或者响应式设计的⽅法
（1）使⽤@media，条件（min-width: 768px）判断当浏览器的宽度⼩于768px值时，改变样式。
@media (min-width: 768px) {
.main {
width: 25%;
float: left;
}
}
通过媒体查询选择性加载css，意思是⾃动探测屏幕宽度，然后加载相应的CSS⽂件。
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />
上⾯的代码意思是，如果屏幕宽度⼩于400像素（max-device-width: 400px），就加载tinyScreen.css⽂件。
link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />
上⾯的代码意思是：如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css⽂件。
（2）宽度使⽤百分⽐，尽量少使⽤绝对值宽度。
由于⽹页会根据屏幕宽度调整布局，所以不能使⽤绝对宽度的布局，也不能使⽤具有绝对宽度的元素。这⼀条⾮常重要。
例如：
不能使⽤⼀下css代码：
div{width：xxx px}
在响应式中，应该这么使⽤：
div{
width:100%;
//或者
width:auto;
}
（3）字体的设置相对⼤⼩
移动端字体也不能使⽤绝对⼤⼩（px），⽽只能使⽤相对⼤⼩（em）或者⾼清⽅案（rem）,rem不局限于字体⼤⼩，前⾯的宽度width也可以使⽤，代替百分⽐body{
font: normal 100% Helvetica, Arial, sans-serif;//设置字体⼤⼩为默认⼤⼩，16像素网页float是什么意思
}
移动端设置字体⼤⼩：
在移动端上，设置字体为24px，则24/16=1.5，p的⼤⼩是默认⼤⼩的1.5倍，即24像素（24/16=1.5）。
p{font-size: 1.5em}
（4）流动布局（fluid grid）
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。
.leftDiv{
float: left;
width: 70%;
}
.rightDiv {
float: right;
width: 25%;
}
4.具体理解
在⽹页上，写⼀个普通的⽹页效果
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
</head>
<style type="text/css">
p{border: 1px solid black;}
</style>
<body>
<div>
<p>响应式原理</p>
</div>
</body>
</html>
模拟⼿机上看到的样式，字体很⼩，看不清，是因为按照电脑上的像素对字体进⾏设置的，分辨率不⼀样。
加上代码后的样式：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
viewport: ⼀般指的是浏览器窗⼝内容区的⼤⼩，不包含⼯具条、选项卡等内容
width: 浏览器宽度，输出设备中的页⾯可见区域宽度
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度
initial-scale: 初始缩放⽐例
maximum-scale: 最⼤缩放⽐例

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。