如何利用css3中@media实现响应式布局

2024年1月30日 212次阅读 来源: 阿呆zy

利用css3中的@media属性可以针对不用媒体类型以及屏幕尺寸定义不同的样式。

语法

  @media mediatype and|not|only (media feature) {
    CSS-Code;
  }
  # 针对不同的媒体类型以及屏幕尺寸引入不同的外链样式文件
  <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

列举常用的媒体类型和屏幕尺寸如下

媒体类型

值描述
all所有设备
screen用于电脑屏幕、平板、手机等

媒体功能

值描述
max-width输出设备中的页面最大可见区域
min-width输出设备中的页面最小可见区域

Demo

  # 屏幕宽度小于768px采用`tab-h3`这个class
  @media (max-width: 768px) {
    .tab-h3 {
      font-size:20px;
    }
  }

bootstrap中几个常用class对应尺寸对照

值描述
.col-xs-超小屏幕 手机(<768px)
.col-sm-小屏幕 平板(>=768px)
.col-md-中等屏幕 桌面显示器(>=992px)
.col-lg-大屏幕 大桌面显示器(>=1200px)
    原文作者：阿呆zy
    原文地址: https://www.jianshu.com/p/0339dcae9ce2
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞