rem即是以html文件中font-size的大小的倍数
rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小的动态适配,做出更漂亮整洁的页面
rem布局的好处:
1.页面整洁
2.动态适配
缺点:
1.需要计算rem,但可以通过自动转化单位插件弥补

less:是一门css扩展语言,也成为css预处理器,引入了变量,mixin(混入)、运算以及函数等功能
css弊端:1.冗余度高 2.维护成本高 3.没有很好的计算能力
less变量定义:@变量名:值;
值可以是任意css属性值,如颜色大小
注意:1.大小写区分 2.不能以数字开头 3.不能有特殊符号
less变量引用,直接输入@变量名即可
less嵌套
子元素样式直接写到父元素嵌套里
例div { a{xxxx} } 代表div a {}; div { &hover {} } 代表div:hover

less运算
less可以使用+ - * / 运算符号
颜色大小都可以运算
运算符左右必须空格隔开
两个数参与运算,只有一个有单位,则结果单位与其相同
两个数参与运算,量个数都有单位且不一样,则结果与第一个数的单位相同
注:less中可以用@import引入其他less文件 如@import:url(xxxx.less);

基本步骤:
1.首先写一个common.less文件,专门用于媒体查询,其中常用的屏幕大小单位有320px 360px 375px 384px 400px 414px 424px 480px 540px 720px 750px。该文件的作用是设置不同大小屏幕下的font-size大小,其中倍数可以为15或者10,可以设置变量表示方便书写

 //利用媒体查询按照同一比例(10或者15)设置不同屏幕尺寸下的font-style大小
//利用@+变量名:变量值 设置变量,提高效率
@no:15;
@media screen and (min-width: 320px) {
html {
font-size: 320px / @no;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 360px / @no;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 375px / @no;
}
}
@media screen and (min-width: 384px) {
html {
font-size: 384px / @no;
}
}
@media screen and (min-width: 400px) {
html {
font-size: 400px / @no;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 414px / @no;
}
}
@media screen and (min-width: 424px) {
html {
font-size: 424px / @no;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 480px / @no;
}
}
@media screen and (min-width: 540px) {
html {
font-size: 540px / @no;
}
}
@media screen and (min-width: 720px) {
html {
font-size: 720px / @no;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 750px / @no;
}
}

2.然后再写样式less文件,注意要先设置好当前测量页面的font-size大小,因为我们是根据某个页面来测量元素大小,所以要根据这个页面先设置好当前的rem倍数的变量,如750/15 =50.同时设置好页面的最小宽度320px。书写样式时,大部分px单位都需要转为rem,可以通过运算符或者插件表示。
切记通过import引入媒体查询文件,否则页面动态适配无法生效

 @import:url(common.css)
@baseFont: 50;

总结:rem布局的灵魂在于通过媒体查询动态修改font-size,再利用rem与其链接达到动态适配的效果。所以重点是媒体查询的书写以及元素大小单位的书写,而利用less可以轻松实现计算,当然也可以利用阿里巴巴的flexible.js省略媒体查询一步,从而不需要less扩展语言。

移动端开发rem布局之less+媒体查询布局的原理步骤和心得的更多相关文章

  1. python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架

    一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...

  2. 移动端开发rem单位

    1.用js计算 <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientat ...

  3. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

  4. bootstrap_响应式布局简介_媒体查询_媒体选择器_2x3x图

    响应式布局 在不同设备上,同一网页根据设备特性(显示屏大小,分辨率)呈现不同的布局样式. 思考: 获取设备相关信息 将屏幕划分为几个区域 给需要变化的结构写多套 css 样式 媒体查询 常用写法 @m ...

  5. 移动端常用的meta标签,媒体查询以及一些样式设置《转载收藏》

    <meta name="screen-orientation" content="portrait"> <meta name="fu ...

  6. 移动端开发--rem和像素如何使用!

    刚开始做移动端的开发的时候,大多时候是在使用 像素(PX)来写页面和布局的,但是使用下来,还是有多少不好用! 随之就开始用 rem 来写,rem写的结果是页面放到一些屏幕上,字体过小,如果页面渲染用了 ...

  7. 移动端开发 rem 案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. px,rem,em 通过媒体查询统一的代码

    @media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) { html,body { ...

  9. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

随机推荐

  1. <转>python列表、元组、集合、字典、json相互转换以及其他基础入门

    列表元组转其他 # 列表转集合(去重) list1 = [6, 7, 7, 8, 8, 9] set(list1) # {6, 7, 8, 9} #两个列表转字典 list1 = ['key1','k ...

  2. web: 屏蔽button元素的空格键和enter响应

    用tab键可以在各种元素之间切换焦点,然后键盘上的空格和enter按键触发click事件,我这里不想要这种效果. 所以我需要屏蔽这两个按键. function keyup(e) { var currK ...

  3. js之切换全屏和退出全屏实现

    应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen&q ...

  4. 【技术博客】Django+uginx+uwsgi框架的服务器部署

    1.登录服务器 使用ssh来直接登录到服务器terminal进行操作,推荐使用XShell和XFtp来进行远程登录和文件传输. 2.运行环境准备 本组获得的华为云服务器为ubuntu16.04版本,先 ...

  5. Pushing state-of-the-art in 3D content understanding

    Pushing state-of-the-art in 3D content understanding 2019-10-31 06:34:08 This blog is copied from: h ...

  6. Scrapy中的Request和Response

    Request Request 部分源码: # 部分代码 class Request(object_ref): def __init__(self, url, callback=None, metho ...

  7. 【转】Python查找某文件夹下的所有excel文件

    # -*- coding: utf-8 -*- # author:baoshan import os dirname = r'D:\0.shenma\01.聊城资料\01.数据资料\02.聊城年鉴数据 ...

  8. sql 时间段交叉查询是否有交集

    --双11活动结束时间大于当前服务器时间代表有效期的活动 --实现1 select * from ProdCar A where A.EndDate> GETDATE() and A.EndDa ...

  9. 百度网盘快速下载工具下载:Pandownload下载

    众所周知的百度网盘下载限速很厉害,所以就有了快速下载工具出现了.一般情况下,按照家里网速有多快,使用工具下载就有多快. 可以直接复制如下图进行下载: 另外,PanDownload[百度网盘下载工具]无 ...

  10. webshot一款网页快照工具

    webshot https://github.com/brenden/node-webshot Webshot provides a simple API for taking webpage scr ...