zoukankan      html  css  js  c++  java
  • CSS3 @media 查询,根据屏幕screen大小调节前端显示;媒体查询方法的使用

    ------------------- 1.媒体查询方法在 css 里面这样写 --------------------

    @media screen and (min- 320px) and (max- 480px){
    在这里写小屏幕设备的样式
    }

    @media only screen and (min- 321px) and (max- 1024px){
    这里写宽度大于321px小于1024px的样式(一般是平板电脑)
    }

    @media only screen and (min- 1029px){
    这里写pc客户端的样式
    }

    使用JS判断屏幕是横屏还是竖屏,然后使用媒体查询进行CSS设置:https://www.w3cways.com/1772.html

    参考:

    http://www.runoob.com/cssref/css3-pr-mediaquery.html

    http://blog.51cto.com/ezbanana/1892526

    https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

  • 相关阅读:
    JS小功能系列9商品筛选
    JS小功能系列8省市联动
    if u
    js属性
    js初识
    弹性盒
    项目合作
    css重置
    关于响应式布局
    自我定位
  • 原文地址:https://www.cnblogs.com/shengulong/p/9906541.html
Copyright © 2011-2022 走看看