手机端用rem+scss做适配的详解


Posted in HTML / CSS onNovember 15, 2017

rem介绍

rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位。

假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如

html{
    font-size: 10px;
}
p{
    width: 2rem; /* 2*10 = 20px;*/
    margin: 1rem;
}

rem来做适配

以前我们往往这样做页面:viewport width 设置为 device-width,然后选我们需要兼容设备的最小宽度(一般是320px)。根据这最小宽度来做页面。单位使用px和百分比。在宽度不同的设备上,页面的字体大小,内容尺寸都是一样的,不同的是,大屏的内容间的空隙比小屏的大。所以这样做的缺点就是,页面在某些尺寸的设备上显示的效果不好。

如果用rem来页面,我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽,字体越大。然后对原本使用px的地方使用rem来替换。这样,字体大小,内容尺寸,对随着屏幕宽度的变大而变大。

首先js设置html的默认字体大小(写在html头部)

<script type="text/javascript">
    var bodyElement = document.documentElement || document.body,
        RC = {
            w: 750,
            h: 1206
        }, //默认设计稿宽高
        GC = {
            w: document.documentElement.clientWidth || window.innerWidth || screen.width,
            h: document.documentElement.clientHeight || window.innerHeight || screen.height
        };
    function setFontSize(){
        var rightSize = parseFloat((RC.w / RC.h).toFixed(1)),
            currentSize = parseFloat((GC.w / GC.h).toFixed(1)),
            lastHTMLSize = 16, // 默认16是因为html默认字号是16px
            html = document.getElementsByTagName("html")[0];
       
            if(rightSize > currentSize){  // 长屏
                lastHTMLSize = 16;
            }else if(rightSize < currentSize){  //宽屏
                lastHTMLSize = (RC.h / GC.h * GC.w) / RC.w * 16;
            }
            html.style.fontSize = GC.w / lastHTMLSize + 'px';
       
    }

    setFontSize();
</script>

设置scss文件px转rem

// 默认16是html默认字号
// 默认750是设计稿默认宽度
// $n是量取设计稿的距离

@charset "UTF-8";
@function rem($n) {
    @return $n / (750 / 16)+rem;
}

编辑方便调用的函数:

@function getTop($n) {
    @return ($n - 1206 / 2) / (750 / 16)+rem;
}

@function getLeft($n) {
    @return ($n - 750 / 2) / (750 / 16)+rem;
}

@function getRight($n) {
    @return (($n - 750) / 2) / (750 / 16)+rem;
}

@mixin center($left, $top) { //左右居中 上变
    position: absolute;
    left: 50%;
    top: rem($top);
    margin: 0 0 0 getLeft($left);
}

@mixin centerlt($left, $top) { //上下,左右居中 
    position: absolute;
    left: 50%;
    top: 50%;
    margin: getTop($top) 0 0 getLeft($left);
}
@mixin centerrt($right, $top) { //上下,左右居中 
    position: absolute;
    right: 50%;
    top: 50%;
    margin: getTop($top) getRight($right) 0 0;
}
@mixin middlert($right, $top) { //上下居中 右变
    position: absolute;
    right: rem($right);
    top: 50%;
    margin: getTop($top) 0 0 0;
}

@mixin centerb($left, $bottom) { //左右居中 下变
    position: absolute;
    left: 50%;
    bottom: rem($bottom);
    margin: 0 0 0 getLeft($left);
}

@mixin leftTop($left, $top) { //左变 上变
    position: absolute;
    left: rem($left);
    top: rem($top);
}
@mixin rightTop($right, $top) { //右变 上变
    position: absolute;
    right: rem($right);
    top: rem($top);
}
@mixin leftBottom($left, $bottom) { //右变 上变
    position: absolute;
    left: rem($left);
    bottom: rem($bottom);
}

调用上面的函数(宽高距离用ps量实际距离即可,默认设计稿宽750):

.page1-img1{
    width: rem(473);
    height: rem(173);
    @include centerlt(139, 767);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 #HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 #HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 #HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 #HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 #HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 #HTML / CSS
HTML5添加禁止缩放功能
Nov 03 #HTML / CSS
You might like
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
Python中的多重装饰器
2015/04/11 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python subprocess模块常见用法分析
2018/06/12 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
春节请假条
2014/04/11 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
设备技术员岗位职责
2015/04/11 职场文书
2016年校长新年寄语
2015/08/17 职场文书
Python 多线程处理任务实例
2021/11/07 Python