zoukankan      html  css  js  c++  java
  • @media screen 响应式布局

    定义和使用

    使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

    当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    有两种方式:

    一种是直接在link中判断设备的尺寸

    <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min- 400px)">
    意思为当屏幕的宽度大于等于400px的时候,应用styleA.css

    另一种方式,即是直接写在 style 标签里

    @media screen and (max- 600px) { } /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ 
    @media screen and (min- 960px) and (max-1200px) { } /*当屏幕尺寸大于960px且小于1200px时,应用下面的CSS样式*/ 

    注意:

    如果你把@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的设备 }

    最后,拜拜~~

  • 相关阅读:
    DBCP连接池使用
    odoo10学习笔记十七:controller
    odoo10学习笔记十六:定时任务
    odoo10学习笔记十五:仪表板
    odoo10学习笔记十三:qweb报表
    odoo10学习笔记十二:web controller
    odoo10学习笔记十一:视图综述
    odoo10学习笔记十:Actions
    odoo10学习笔记九:Odoo10 API
    odoo10学习笔记七:国际化、报表
  • 原文地址:https://www.cnblogs.com/wangxiaomo/p/12492256.html
Copyright © 2011-2022 走看看