阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      媒体查询 media query 适配布局的用法

      媒体查询的作用

      @media (media-feature-name: value) {
          /* 符合条件时应用的样式 */
      }
      

      上面是媒体查询的基本结构,根据查看网页的设备的某些重要信息(比如屏幕大小、分辨率、颜色位深等),页面可以分别应用不同的样式甚至替换整个样式表。

      如果浏览器当前的条件与圆括号中的条件匹配,它就会采用花括号中的那些样式。如果不匹配,浏览器会忽略这些样式。

      注意:浏览器始终会采用位于@media代码块之外的样式。满足条件时的媒体查询样式是在其他样式基础上应用的。

      为此,条件式媒体查询样式经常要覆盖其他样式,比如隐藏之前的可见元素,把区块移动位置,调整字号等。

      媒体查询中最常用的媒体特性 media feature

       特性名应用场景
       width
       min-width
       max-width
       显示区域的宽度(对打印机而言是打印表面) 改变布局以适应非常窄(如手机)或非常宽的显示器。
       height
       min-height
       max-height
       显示区域的高度 改变布局以适应非常长或非常短的显示器
       device-width
       min-device-width
       max-device-width
       当前计算机或设备屏幕的宽度
      (或打印输出时纸面的宽度)
       根据不同设备(如手机)调整布局
       device-height
       min-device-height
       max-device-height
       屏幕或纸面的高度 根据不同设备(如手机)调整布局
       orientation landscape(横向)或portrait(纵向) 根据设备的朝向调整布局
       device-aspect-ratio
       min-device-aspect-ratio
       max-device-aspect-ratio
       显示区域的宽高比(1/1是正方形) 根据窗口形状调整样式(问题可能比较复杂)
       color
       min-color
       max-color
       屏幕颜色的位深
      (1位表示黑白,目前主流显示器都是24位)
       检查是否支持彩色输出(比如是不是黑白打印),
       或者支持的颜色数量

      虽然有这么多媒体特性,但目前最流行最常用的是如下几个:

      • max-device-width:用于创建手机版网站
      • max-width:用于针对窗口宽度设定不同的样式
      • orientation:用于根据平板电脑或iPad的横向或者竖向来改变布局

      媒体查询的高级条件

      使用 and 关键字拼接媒体查询块

      /** 正常样式 **/
       
      @media (min-width: 600px) and (max-width: 700px) {
          /** 窗口宽度在600-700像素的样式 **/
      }
       
      @media (min-width: 500px) and (max-width: 599.99px) {
          /** 窗口宽度在500-600像素的样式 **/
      }
       
      @media (max-width: 499.99px) {
          /** 窗口宽度小于500像素的样式 **/
      }
      

      使用 not 关键字(下面这个功能效果与上面那个一样)

      /** 正常样式 **/
       
      @media (not max-width: 600px) and (max-width: 700px) {
          /** 窗口宽度在600-700像素的样式 **/
      }
       
      @media (not max-width: 500px) and (max-width: 600px) {
          /** 窗口宽度在500-600像素的样式 **/
      }
       
      @media (max-width: 500px) {
          /** 窗口宽度小于500像素的样式 **/
      }
      

      替换整个样式表

      如果样式修改的地方很多,那么创建一个新样式表会更便于管理。创建样式表后,可以使用媒体查询创建一个样式表链接。

      1)当页面宽度小于568像素时,会应用新样式并与原来已存在的样式叠加。

      <head>
        <link rel="stylesheet" href="hangge.css">
        <link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
      </head>
      

      (2)下面样例让几个样式完全独立,不叠加

      <head>
        <link rel="stylesheet" media="(min-width: 568.01px)" href="hangge.css">
        <link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
      </head>
      

      但像旧版的IE不理解媒体查询就会忽略这两个样式表,所以我们需要使用条件注释引入标准样式表:

      <head>
        <link rel="stylesheet" media="(min-width: 568.01px)" href="hangge.css">
        <link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
        <!--[if lt IE 9]>
          <link rel="stylesheet" href="hangge.css">
        <![endif]-->
      </head>
      

      识别特定的移动设备

      检测手机

      使用 max-device-width 可以区别普通计算机和移动设备。根据经验,将 max-device-width 设置为568像素就能够涵盖目前的iPhone和Android手机(不管横向还是竖向):

      <link rel="stylesheet" media="(max-device-width: 568px)" href="hangge_mpbile.css">
      

      注意:对于高分辨率屏幕的手机上面规则也是适用的,这是由于高分屏手机引入像素比(pixel ratio)。

      以iPhone5为例,虽然它的物理像素是:640像素1136像素,但它的像素比是2(两个物理像素对应一个CSS像素)。因此其声明的CSS像素是:320像素568像素。

      检测平板

      对于iPad等平板,用户经常会改变方向。改变方向虽然会改变 max-width,但不会改变 max-device-width。 无论竖向还是横向,iPad始终报告自己的设备宽度为768像素。

      所以我们要组合使用 max-device-width 和 orientation 属性,以便区别iPad的方向应用不同的样式:

      <link rel="stylesheet"
          media="(max-device-width: 768px) and (orientation: portrait)"
          href="iPad_portrait.css">
      
      <link rel="stylesheet"
          media="(max-device-width: 768px) and (orientation: landscape)"
          href="iPad_landscape.css">
      

      上面规则不仅限于iPad,其他屏幕大小类似(768像素或更小)的设备也适用

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录