手机端用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 mask遮罩实现一些特效
Oct 24 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 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中常用编辑器推荐
2007/01/02 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
js面向对象的写法
2016/02/19 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
pytorch实现查看当前学习率
2020/06/24 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
高中微机老师自我鉴定
2014/02/16 职场文书
农业生产宣传标语
2014/10/08 职场文书
关于工作经历的证明书
2014/10/11 职场文书
建议书格式
2015/02/04 职场文书
参加招聘会后的感想
2015/08/10 职场文书
学校教代会开幕词
2016/03/04 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Golang 如何实现函数的任意类型传参
2021/04/29 Golang