찾다

 >  Q&A  >  본문

css3 - 做响应式布局,媒体查询最普遍设的宽度都有哪几个?

开始要做这个东西,但是具体的宽度设置不太好确定。大神们介绍一下经验吧~

高洛峰高洛峰2782일 전635

모든 응답(2)나는 대답할 것이다

  • 巴扎黑

    巴扎黑2017-04-17 11:18:57

    可以参照一下bootstrap的媒体查询宽度

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

    这应该也是比较普遍的宽度吧?

    另外 SemanticUI的媒体查询是这样的:

    Mobile Tablet Small Monitor 大型显示器
    Width 100% 723px 933px 1127px
    Gutter Size 1em Fluid Fluid Fluid
    响应可见性 mobile only tablet only small monitor only large monitor only
    Device Width ~768px 768px - 991px 992px - 1200px >1200px

    可见和bootstrap是一样的。
    具体可以看这里SemanticUI-container

    회신하다
    0
  • 迷茫

    迷茫2017-04-17 11:18:57

    可以参考网易neccss media

    /* media */
    /* 横屏 */
    @media screen and (orientation:landscape){
    
    }
    /* 竖屏 */
    @media screen and (orientation:portrait){
    
    }
    /* 窗口宽度<960,设计宽度=768 */
    @media screen and (max-width:959px){
    
    }
    /* 窗口宽度<768,设计宽度=640 */
    @media screen and (max-width:767px){
    
    }
    /* 窗口宽度<640,设计宽度=480 */
    @media screen and (max-width:639px){
    
    }
    /* 窗口宽度<480,设计宽度=320 */
    @media screen and (max-width:479px){
    
    }
    /* windows UI 贴靠 */
    @media screen and (-ms-view-state:snapped){
    
    }
    /* 打印 */
    @media print{
    
    }
    

    회신하다
    0
  • 취소회신하다