自适应(响应式)网页中的几个关键分辨率

现在移动端设备的普及下，除了办公和游戏外，使用电脑的次数越来越少，基本上都成为了低头一族。而这苦了一些网页前端的设计人员，为了能让网页适应PC端又同时适配移动端，自适应响应式网页就成为了当前的主流。 自适应网页在不同设备或不同分辨率下，显示的布局是不同的。为了不让页面变形，而更好来美化网页，我们可以利用 @media screen 实现网页布局的自适应。 @media screen 虽然可以实现网页布局的自适应，但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？

@media screen 使用方法

下面的代码是我们从 bootstrap 遍历出来的关于控制自适应的代码

@media print
@media (min-width: 768px)
@media (min-width: 992px)
@media (min-width: 1200px)
@media (max-width: 767px)

说明：从上页的代码中，我们不难看出 min-width 来确认分别是768、992、1200的分辨率。当然以前也有些老的设备宽度是600、480的，那些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢，那是因为在css中 @media (min-width:768px) 表示最小是768也就是>=768，这里有等于，所以我们判断更小的设备用 @media (max-width: 767px) 表示<=767就不会有冲突了。 @media screen 最小宽度 从上面的代码中，可以看出有几个临界点的分辨率，通过他们我们可以写出自己的自适应代码。

@media (min-width: 768px) {
	//>=768px的设备
}
@media (min-width:992px) {
	//>=992px的设备
}
@media (min-width:1200) {
	//>=1200px的设备
}

注意下它们顺序，如果你把 @media (min-width: 768px) 写在了下面那么很悲剧，如下面的代码：

注意：此代码为错误的写法

@media (min-width:1200px) {
	//>=1200px的设备
}
@media (min-width:992px) {
	//>=992px的设备
}
@media (min-width:768px) {
	//>=768px的设备
}

因为如果是1440，由于1440>768那么你的1200就会失效。 我们用 min-width 时，要注意他们的排列顺序，小的放上面大的在下面(从小到大)。

@media screen 最大宽度

既然我们可以使用 min-width，也可以使用 max-width 来进行分辨率的划分，max-width的排列顺是大的在上面，小的在下面(从大到小)。

@media (max-width: 1199px) {
	//<=1199px的设备
}
@media (max-width: 991px) {
	//<=991px的设备
}
@media (max-width: 767px) {
	//<=768px的设备
}

通过上面的举例，我们可以灵活的来运用这些代码，来达到网页可以自适应各和设备的目的。

@media and (min-width: 1200px) {
	//>=1200px的设备
}
@media and (min-width: 960px) and (max-width:1199px) {
	//<=1199px and >=960px的设备:PC端
}
@media and (min-width: 768px) and (max-width:959px) {
	//<=959px and >=768px的设备：PC端
}
@media and (min-width: 640px) and (max-width:767px) {
	//<=767px and >=640px的设备：平板端或者手机横屏
}
@media and (min-width: 480px) and (max-width:639px) {
	//<=639px and >=480px的设备：手机横屏
}
@media and (min-width: 320px) and (max-width:479px) {
	//<=479px and >=320px的设备：手机竖屏
}
@media and (min-width: 240px) and (max-width:319px) {
	//<=479px and >=320px的设备：手机竖屏
}
@media and (max-width: 239px) {
	//<=239px的设备:手机竖屏
}

转自：https://www.feiniaomy.com/post/265.html