移动WEB开发之rem布局

最新推荐文章于 2024-02-08 08:57:49 发布

lskaixin

最新推荐文章于 2024-02-08 08:57:49 发布

阅读量348

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/ls08250907/article/details/120175180

版权

2.2 利用媒体查询实现不同屏幕适配不同样式，发现规律可简写为判断

4.1 less + 媒体查询 + rem

4.2 flexble.js + rem

前言

为什么要学习rem 布局？Rem布局能实现什么样的功能？我们之前学过em，em的大小是取决于当前元素的字体大小或者父元素的字体大小，那么rem又是相对于谁的？

一、rem基础

1.1 我们之前学过em，em的大小是取决于当前元素的字体大小或者父元素的字体大小，那么rem又是相对于谁的？

Rem是一个相对单位，相对于html的字体大小。如果整个页面很多地方用rem进行布局，只需要在不同屏幕下修改 html的字体大小，那么整个页面都会同步变化。

二、媒体查询

2.1 媒体查询语法简介

媒体查询是css3语法，可以实现根据不同屏幕适配不同的样式

语法结构为：@media 媒体类型关键字（媒体特性）{}

2.1.1 mediatype查询类型

all用于所有设备

print用于打印机和打印预览

scree用于电脑屏幕，平板电脑，智能手机等。

2.1.2 关键字

and：将多个多媒体特性链接到一起

@media screen and (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

上述代码规定当前媒体必须满足如下条件，才会将div颜色设置为红色

not：排除某个媒体类型

@media not screen and (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

not是对整个媒体查询语句的一个取反，而不是对某一个媒体属性取反。
所以上述代码等同于@media not( screen and (min-width:800px) and (max-width:1200px))。

only：指定某个特性的媒体类型

它是为了兼容低版本的浏览器而存在的

or：只要满足两个或多个条件中的一条就可以执行的类型

@media (max-width:500px) , (orientation: landscape) {
  div{
    color:red;
  }
}

or操作符用逗号表示，否则会报错。

只要满足视口宽度小于等于500像素或者横屏的任意一条，那么div字体颜色就会被设置为红色。

2.1.3 媒体特性

用小括号包含

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。

视口宽高比：aspect-ratio | min-aspect-ratio | max-aspect-ratio。

设备宽高比：device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio。

颜色属性：color | min-color | max-color。

颜色索引属性：color-index | min-color-index | max-color-index。

方向属性：orientation。

分辨率属性：resolution | min-resolution | max-resolution。

网格属性：grid。

黑白属性：monochrome | min-monochrome | max-monochrome。

与CSS属性不同的是，媒体属性是通过min/max来表示大于等于或小于作为逻辑判断

例如：@ media screen and (max-width:800px) {

css样式

}

2.2 利用媒体查询实现不同屏幕适配不同样式

min-width 可以从小到大写即可

原理是：利用后面会层叠前面的样式

2.3 引入资源

直接在link中判断设备的尺寸，然后引用不同的css文件

体语法查询语法简介

三、less基础

3.1 初识less

less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情。

和css相比下，css的语法非常简单，而且对开发者来说要求比较低，比较合适小白者，但是遇到有些问题，比如没有这种变量、函数等等，的确还不如less的扩展性，需要写大量的代码，但是看眼中的确没有逻辑的代码，CSS冗余度是比较高的。不方便维护，不利于复用，而且没有计算的能力。

如果对css有基础的话，less很容易上手的。因为css和less区别不大的，反正可以通过编译生成浏览器能识别的css文件。

3.2 less使用

这个less使用不用复杂，就是新建一个后辍名为less文件即可，然后在less文件使用less语句，当写完less语句编译后就会自动生成多了一个后辍名为css文件即可。

3.3 less语法

3.3.1 嵌套规则

以嵌套的方式编写层叠样式，允许将一个类的属性用于另一个类，并且包含类名作为其属性。

子元素的样式直接在父元素里面写

伪类、交集选择器、伪元素选择器我们内层选择器的前面加&

例如:

html代码

 <header class="nav"  id="navclass">
    <span class="logoclass" >我是logo</span>
    <ul>
      <li><a href="#">梼杌</a></li>
      <li><a href="#">饕餮</a></li>
      <li><a href="#">穷奇</a></li>
      <li><a href="#">浑沌</a></li>
    </ul>
 </header>

less代码

.nav{
    width:100%;
    height:50px;
    border-bottom:1px solid #ccc;

    span{
        float: left;
        color:#ccc;
        font-size: 12px;
    }

    ul{
        text-align: center;
        list-style:none;
        font-size:17px;

        li{
            float: left;
            width:22%;
            line-height:36px;
                a{
                    text-decoration: none;
                    color:#000;

                    &:hover{ color:#FBA800; }
                }
        }
    }
}

less编译后代码

.nav{
    width:100%;
    height:50px;
    border-bottom:1px solid #ccc;
}
.nav span{
    float: left;
    color:#ccc;
    font-size: 12px;
}
.nav ul{
    text-align: center;
    list-style:none;
    font-size:17px;
}
.nav ul li{
    float: left;
    width:22%;
    line-height:36px;
}
.nav ul li a{
    text-decoration: none;
    color:#000;
}
.nav ul li a:hover{
    color:#FBA800;
}

3.3.2 变量

可以将属性的值赋值给一个变量，变量为完全的 “常量” ，所以只能定义一次。less定义变量用@开头。

例如

@nice-blue: #5B83AD;
@light-blue: @nice-blue ;
li{
    float: left;
    width:22%;
    line-height:36px;
        a{
            text-decoration: none;
            color:@nice-blue;

            &:hover{ color:@light-blue; }
        }
}

li a{
    text-decoration: none;
    color:#5B83AD;
}
li a:hover{
    color:#5B83AD;
}

3.3.4 运算

在CSS里面不能进行计算，于是在less中引入了运算。在less中可以进行+、-、*、/的运算。可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。注意运算符左右需要用空格隔开

// 所有操作数被转换成相同的单位 并以最左侧单位为最终单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm 
 
// conversion is impossible 无效的单位换算
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
 
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

3.3.5 注释

CSS形式的注释在less中是依然保留，less同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉

3.3.6 Importing

可以在主文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带

@import "library"; // library.less
@import "typo.css";

四、rem适配方案

4.1 less + 媒体查询 + rem

动态设置html标签font-size大小

1. 假设设计稿 750 px
2.假设把屏幕划分为15等份(划分标准不一定可以是20 也可以是10)
3. 每一份作为html字体大小这里就是50px
4.那么在320px设备的时候字体大小为320/15 就是21.33px
5.用页面元素的大小除以不同的html字体大小会发现它们的比例还是相同的
6. 比如一个 100像素元素在750屏幕下就是100/50 转换为rem 是2rem
7.320屏幕下 html字体大小为21.33 则2rem=42.66px

元素大小取值方法

1.最后的公式:页面元素的rem值 = 页面元素值(px)/(屏幕宽度/划分的份数)
2.屏幕宽度/划分的份数就是html font-size的大小
3.或者:页面元素的值 = 页面元素值(px)/html font-size字体大小