移动端和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像素

}

移动端设置字体大小：

在移动端上，设置字体为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: 最大缩放比例