zoukankan      html  css  js  c++  java
  • 响应式布局设备分界点

    http://v3.bootcss.com/css/#overview-doctype
     Bootstrap 
    /*
    超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */ /* 小屏幕(平板,大于等于 768px) */ @media (min- @screen-sm-min) { ... } /* 中等屏幕(桌面显示器,大于等于 992px) */ @media (min- @screen-md-min) { ... } /* 大屏幕(大桌面显示器,大于等于 1200px) */ @media (min- @screen-lg-min) { ... }


    我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内
    @media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }

    @media (min-480px) and (max- 767px) 

    @media (min-768px) and (max- 992px)

    @media (max- 479px) 

    @media all and (-webkit-min-device-pixel-ratio: 2), all and (-moz-min-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 2), all and (-o-min-device-pixel-ratio: 2/1)

    @media (max- 479px) and (-webkit-min-device-pixel-ratio: 2), all and (-moz-min-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 2), all and (-o-min-device-pixel-ratio: 2/1)

  • 相关阅读:
    webpack基本使用
    vue-路由-显示名称
    vue-父组件和路由
    vue-路由
    vue-父子组件和ref
    vue-组件
    go-面向对象编程(上)
    JavaScript的历史
    vue-列表动画
    钩子函数实现小球弹落
  • 原文地址:https://www.cnblogs.com/aimyfly/p/3425494.html
Copyright © 2011-2022 走看看