zoukankan      html  css  js  c++  java
  • 响应式web之媒体查询(一)

      HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性,扩展了媒体类型的功能。

      媒体查询既可以在样式表中使用也可以在link中使用,甚至可以指定应用的样式表。

    <!-- 在link中使用媒体查询 -->
    <
    link rel="stylesheet" type="text/css" media="screen and (min-800px)" href="style.css"/>

    //在css样式表中使用媒体查询
    @media screen and (min-800px) {
        p{
            color:#ff00ff;
        }
    }
    //在css样式表中引用其他的样式表
    @import url('path/common.css') screen and (min-800px);

      screen代表设备是显示屏,and连接的是媒体的特性,如上面的代码表示显示屏的最小宽度是800px,如果设备既是显示屏,显示屏的宽度大于等于800px,那么就加载样式表或应用样式。

  • 相关阅读:
    深入理解iOS开发中的锁
    整理:iOS开发算法资料
    (二)ELK Filebeat简介
    (一)ELK 部署
    zabbix + grafana 展示
    (二)LVS介绍
    (一)集群介绍
    zabbix 监控 ESXI
    zabbix proxy 安装
    zabbix fping 监控网络质量
  • 原文地址:https://www.cnblogs.com/luoshufang/p/5715222.html
Copyright © 2011-2022 走看看