媒体查询+rem移动端布局

移动端布局

1.移动端基础

2.视口

viewport

3.二倍图

物理像素

像素比

4.移动端调试

chorme模拟手机调试工工具

5.移动端常见布局

现在市场上主要有两种布局方案：

单独开发移动端（主流）	响应式兼容移动端（其次）
流式布局（百分比布局） 例如：京东	媒体查询 + Bootstrap框架
flex弹性布局 例如：携程
rem + less + 媒体查询 例如： 苏宁

6.移动端开发之rem布局

学习目标：

能够使用 rem 单位

能够使用媒体查询的基本语法

能够使用 Less 的基本语法

能够使用 Less 中的嵌套

能够使用 Less 中的运算

能够使用 2 种 rem 适配方案

能够独立完成移动端页面布局

方案？

1.页面布局能否随着屏幕大小变化而变化？

2.流式布局和Flex布局主要针对宽度布局，那高度如何设置？

3.怎样让屏幕大小发生变化时元素高度和宽度等比例缩放？

6.1 rem单位

rem( root em ) 是一个相对单位，类似于em,em是父元素字体大小。

不同的是rem的基准是html元素的字体大小。

比如，根元素（html）设置font-size=12px;非根元素设置width：2rem; 换成px就是24px.

6.2 媒体查询

6.2.1 什么是媒体查询？

媒体查询是CSS3新语法。（Media Query)

• 使用@media查询，可以针对不同的媒体类型定义不同的样式。
• @media 可以针对不同的屏幕尺寸设置不同的样式。
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
• 目前针对很多Iphone手机，Android手机，平板等设备都用得到多媒体查询。

媒体查询是为了在做移动端适配时查询各种设备的 width 从而设置根html的font-size。

6.2.2 媒体查询的语法规范

@media mediatype and | not| only (media feature) {

​ CSS-Code;

}

​ 三个参数

• 用 @media 开头 注意@ 符号

• mediatype 媒体类型

• 关键字 and not only

• media feature 媒体特性 必须有小括号包含

  mediatype查询类型

  将不同的终端设备划分成不同的类型，称为媒体类型

  值	解释
  all	用于所有设备
  print	用于打印机和打印预览
  screen	用于电脑屏幕，平板电脑，智能手机等

  关键字

  关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。

  • and: 可以将多个媒体特性连接到一起，相当于“且”。

  • not: 排除某个媒体类型，相当于“非”，可以省略。

  • only: 指定某个特定的媒体类型，可以省略。

    /* 这句话的意思就是：在我们的屏幕上 并且 最大宽度为 800px 设置我们想要的样式*/
    /* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
    @media screen and (max-width:800px){
           
        body {
           
            background-color:pink;
        }
    }
    
    @media screen and (max-width:500px){
           
        body {
           
            background-color:purple;
        }
    }
    

    小demo

    /* 不同屏幕尺寸显示不同颜色 */