使用rem + sass + 媒体查询 进行横竖屏适配移动端项目

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 一、 媒体查询(Media Query)
    • 1.简单了解
    • 2.简单例子
    • 3. 语法
      • (1)媒体类型(mediatype )
      • (2)关键字
      • (3)媒体特性( media feature)
  • 二、使用sass 适配移动端步骤
    • 0. sass + rem 的思路
    • 1. sass 中的each方法(循环)
    • 2. less 中的each方法(循环)
    • 2. 代码


一、 媒体查询(Media Query)

1.简单了解

常见的媒体查询,就是1280、1440、1600、1720、1920。规律也很简单,800 + 160*n。最小就是800px(最小的大部分是投影仪使用),不考虑特别设计的话屏幕的话,最大是2560px。下面使用不同分辨率变背景颜色的例子来初识媒体查询。

2.简单例子

一个根据屏幕宽度来改变背景颜色的媒体查询例子

  

3. 语法

@media mediatype and|not|only (media feature) {CSS-Code;}
  1. @media 固定写法
  2. mediatype 媒体类型
  3. 关键字 and not only
  4. media feature 媒体特性必须有小括号包含

(1)媒体类型(mediatype )

使用rem + sass + 媒体查询 进行横竖屏适配移动端项目_第1张图片

(2)关键字

and:可以将多个媒体特性连接到一起,相当于“且”的意思。
not:排除某个媒体类型,相当于“非”的意思,可以省略。
only:指定某个特定的媒体类型,可以省略。

(3)媒体特性( media feature)

每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 注意他们要加小括号包含
min-width、max-width:最小、最大宽
orientation:landscape、orientation:portrait:横屏、竖屏
orientation: portrait(竖屏,即设备中的页面可见区域高度>=宽度)
orientation: landscape(横屏,即设备中的页面可见区域高度<=宽度)
下图为orientation的兼容性,最小最大值一直都有,然后说明一下orientation的兼容性也是很好的,可以放心使用。需要注意的是:竖屏很少使用,因为默认就是竖屏,这个其实可以不用写。

使用rem + sass + 媒体查询 进行横竖屏适配移动端项目_第2张图片


二、使用sass 适配移动端步骤

安装sass和项目就不多说了,直接说思路

0. sass + rem 的思路

①将根元素设置为100px,则1rem=100px,为了不失真计算出对应的比例。即 1rem = 屏幕宽度/设计图宽度100px。
即:屏幕750px,给的设计稿宽750px,那么这种情况下1rem就表示100px;如果屏幕375px,给的设计稿宽750px,那么这种情况下1rem就表示50px。
②要想做成响应式,只需要配合@media计算好对应屏幕下html font-size的值。同时由于移动端尺寸较多,使用each循环遍历设置font-size的方式更好。
③font-size的值:写入CSS的尺寸 = 设计稿标注的尺寸/100px
1rem
如果一个盒子100px,内间距16px,那就是width: 1rem; padding: 0.16rem。由于计算是基准值为100px,所以计算也较为简单。

1. sass 中的each方法(循环)

sass 官网:https://www.sass.hk/docs/

使用rem + sass + 媒体查询 进行横竖屏适配移动端项目_第3张图片

2. less 中的each方法(循环)

当然了,less也是有遍历的方法的,如下官网示例
使用rem + sass + 媒体查询 进行横竖屏适配移动端项目_第4张图片

2. 代码

sass 代码

// 计算rem的基准字体
$base-font-size: 100px;
// 设计图的基准分辨率宽度
$base-width: 750px;
// 需要适配的屏幕宽度列表
$device-widths: 240px, 320px, 360px, 375px, 384px, 411px, 414px, 424px, 480px, 540px, 640px, 720px, 750px, 768px, 800px, 980px,1024px, 1080px, 1152px,1366px, 1440px, 2160px;
// 根据不同设备的屏幕宽度,定义不同的的基准font-size
@each $current-width in $device-widths {
  @media (min-width: $current-width) {
    html {
      font-size: $current-width * $base-font-sizee/$base-width;
    }
  }
}

// sass 转变为css 的方法

@media (min-width: 240px) {
  html {
    font-size: 32px;
  }
}

@media (min-width: 320px) {
  html {
    font-size: 42.66667px;
  }
}

@media (min-width: 360px) {
  html {
    font-size: 48px;
  }
}

@media (min-width: 375px) {
  html {
    font-size: 50px;
  }
}
// ......

你可能感兴趣的:(前端)