zoukankan      html  css  js  c++  java
  • 运用@media实现网页自适应中的几个关键分辨率

    @media (min- 768px){ //>=768的设备 }
    @media (min- 992px){ //>=992的设备 }
    @media (min- 1200){ //>=1200的设备 }
    注意下顺序,如果你把@media (min- 768px)写在了下面那么很悲剧,
    @media (min- 1200){ //>=1200的设备 }
    @media (min- 992px){ //>=992的设备 }
    @media (min- 768px){ //>=768的设备 }
    因为如果是1440,由于1440>768那么你的1200就会失效。
    所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
    @media (max- 1199){ //<=1199的设备 }
    @media (max- 991px){ //<=991的设备 }
    @media (max- 767px){ //<=768的设备 }

    为什么是小于767而不是768呢,那是因为在css中@media (min- 768px)表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用@media (max- 767px)这边表示<=767就不会有冲突了

  • 相关阅读:
    (一)单例模式
    mysql数据库知识
    JavaScript
    Spring整合AspectJ的AOP
    Spring-AOP
    JDK代理和CGLIB代理
    mybatis-dao开发
    mybatis-入门
    CSS2.1
    HTML基础
  • 原文地址:https://www.cnblogs.com/wangdahai/p/6376627.html
Copyright © 2011-2022 走看看