布局 - rem适配布局

1. rem基础

rem单位

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

rem的基准是相对于html元素的字体大小。


优点:
可以通过修改html里面的文字大小来改变页面中元素的大小,可以整体控制。


2. 媒体查询

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

  • 使用@media查询,可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 重置浏览器大小时,页面会根据浏览器的宽度和高度重新渲染页面

语法规范:

@media mediatype and|not|only (media feature) {
	css-Code;
}

说明:

  • mediatype 媒体类型
    • 将不同的终端设备划分成不同的类型,称为媒体类型
说明
all用于所有设备
print用于打印机和打印预览
scree用于电脑屏幕,平板电脑,智能手机
  • 关键字 andnotonly

    • 关键字将 媒体类型或多个媒体特性连接到一起作为媒体查询的软件。
    • and:可以将多个媒体特性连接到一起
    • not:排除某个媒体类型,可以省略
    • only:指定某个特定的媒体类型,可以省略
  • media feature 媒体特性,必须有小括号

    • 每种媒体类型都具备不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。
说明
width定义输出设备中页面可见区域的宽度
min-width定义输出设备中页面最小可见区域宽度
max-width定义输出设备中页面最大可见区域宽度

一般按照从小到大的顺序写。


媒体查询+rem实现元素动态大小变化
  • rem单位跟着html变化,有了rem页面元素可以设置不同大小尺寸
  • 媒体查询可以根据不同设备宽度来修改样式
  • 媒体查询+rem 可以实现不同设备宽度,实现页面元素大小的动态变化

3. Less基础

  • Less是一门CSS扩展语言,也成为CSS预处理器,为CSS加入程序式语言的特性,扩展了CSS的动态特性
  • 它在CSS语法基础上引入了变量,Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本
  • Less中文网址:[http://lesscss.cn](http://lesscss.cn
  • 常见CSS预处理器:Sass,Less,Stylus
  • 安装网址:http://nodejs.cn/download/
1)Less变量

变量是指没有固定的值,可以改变的。CSS中一些颜色和数值等经常使用。

@变量名:;

命名规范:

  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感

2)Less编译

需要把less文件,编译生成css文件,这样html页面才能使用。


3)Less嵌套
.nav {
    .logo {
        color: green;
    }
}

4)交集、伪类、伪元素选择器
  • 内层选择器的前面没有&符号,则他被解析为父选择器的后代
  • 如果有&符号,他就被解析为父元素自身或父元素的伪类
a {
        color: red;
        &:hover {
            color: blue;
        }
    }

5)Less运算

任何数字、颜色或变量都可以参与运算。less提供了加减乘除算术运算。

/* 代码块里面写*/
@width: 10px + 5;
div {
	border: @width solid red;
}

/* 生成的css */
div {
	border: 15px solid red;
}

width: (@width + 5) * 2;

注意:

  • 运算符左右侧必须用空格隔开
  • 两个数参与运算,如果只有一个数有单位,则最后的结果以该单位为准
  • 两个数参与运算,如果两个数都有单位且不相同,则最后的结果以第一个单位为准

4. rem适配方案

  1. 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
  2. 使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配
技术方案1
  • less
  • 媒体查询
  • rem
  1. 设计稿常见尺寸宽度
设备常见宽度
iphone 4.5640px
iphone 678750px
Android常见320px、360px、375px、384px、400px、414px、500px、720px;大部分安卓设备为720px

一般情况下以一套或两套效果图适应大部分屏幕,现在基本以750为准。


  1. 动态设置html标签font-size大小
  • 假设设计稿为750px
  • 将屏幕划分为15等份(也可以是10或20)
  • 每一份作为html字体大小,这里就是50px
  • 在320px设备中,字体大小就是21.33px

  1. 元素大小取值方法
  • 最后的公式:页面元素的rem值 = 页面元素值(px)/ (屏幕宽度 / 划分的份数)
  • 屏幕宽度 / 划分的份数 就是html font-size的大小
  • 或:页面元素的rem值 = 页面元素值(px)/ html font-size字体大小
技术方案2(推荐)
  • flexible.js
  • rem
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值