@media实现网页自适应中的几个关键分辨率

不同分辨率设备或不同窗口大小下网页布局经常是不同的,一不小心就会发生错位。可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？首先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600、480的，那些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢，那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768，这里有等于，所以我们判断更小的设备用@media (max-width: 767px)表示<=767就不会有冲突了。

@media print
@media（min-width:768px）{}
@media（min-width:992px）{}
@media（min-width:1200px）{}
@media（max-width:767px){}

从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了

@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时，小的放上面大的在下面(从小到大)，同理如果是用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.cnblogs.com/jerrychane/p/6066416.html

@media实现网页自适应中的几个关键分辨率相关推荐

css -- 运用@media实现网页自适应中的几个关键分辨率
经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题.到底分辨率是多少的时候设置呢? 先看下面的代码,这是从b ...
运用@media实现网页自适应中的几个关键分辨率
http://jingyan.baidu.com/article/6f2f55a1ab36c3b5b83e6c46.html http://www.5imoban.net/jiaocheng/div+ ...
网页自适应手机屏幕的几种方法
网页自适应手机屏幕的几种方法一. 允许网页宽度自动调整 <meta name="viewport" content="width=device-width, in ...
html手机响应式布局,手机网页设计中的响应式布局
随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...
android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题
先森在完成网站自适应的过程中,遇到了很多大大小小的问题,其中一个问题就是横屏字体变大的问题.这个问题一碰到感觉很麻烦,其实解决方法却很简单. 网页自适应解决iPhone手机横屏字体变大问题网上搜索结 ...
html 网页自动适应大小,HTML+CSS入门网页自适应解读
本篇教程介绍了HTML+CSS入门网页自适应解读,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.viewport标签基本语法: 上面这行代码的意思是,面积的100 ...
如何让网页自适应屏幕宽度
网页自适应屏幕宽度到底是怎么做到的? 1.首先,在网页代码的头部,加入一行viewport元标签: viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width= ...
移动端网页布局中需要注意事项以及解决方法总结
移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉 <meta name=&qu ...
固定导航在网页设计中应用的22个优秀案例
导航是网站最重要的组成部分之一,有吸引力的导航能够吸引用户浏览网站中的更多内容.今天这篇文章收集了25个固定导航在网页设计中的应用案例,有的导航固定在网页头部,有的则固定在网页侧栏,都设计得非常好,希 ...

@media实现网页自适应中的几个关键分辨率

@media实现网页自适应中的几个关键分辨率相关推荐

最新文章

热门文章