C7

在开发PC端的网站的时候，我们通常需要根据屏幕分辨率的大小，通过css的媒体查询，设置响应的像素大小。在开发手机网站的时候，通常也需要这样设置的。但是在手机端，还需要多设置viewport这个元素。viewport元素通常是用来设置页面的大小和缩放比例的。手机浏览器为了更好地展示这些没有没有为手机设计的网站，通常会使用桌面的宽度来渲染（通常是960px，980px），然后再改变

px，即pixel，像素的意思。像素有两种，一种是物理像素，一种逻辑像素。以前一个逻辑像素是等于一个物理像素的。当一个逻辑像素对应多个物理像素的时候，这时候，显示会更清楚。一个逻辑像素对应多少个物理像素，这个叫做Device pixel ratio(像素设备比)在开发过程中，css通过是使用逻辑像素。还有两个概念：Dpi(dot per inch)：点/每英寸

上一遍文章讲到了viewport，但是通过效果图我们可以看出来，有部分网页内容超出浏览器的宽度，以至于浏览器出现水平滚动条。这一遍文章主要就是来解决这个问题。第一种是：设置viewport，高度固定，宽度使用百分比这种对于简单的列表形比较实用。这种布局方式，通过要为高度进行响应式。第二种是：设置viewport，宽度和高度都固定，利用浏览器本身的功能进行缩放这种