手机端用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 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python从子线程中获得返回值的方法
2019/01/30 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python将字母转化为数字实例方法
2019/10/04 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
为什么相对PHP黑python的更少
2020/06/21 Python
小车司机岗位职责
2013/11/25 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
营销计划书范文
2015/01/17 职场文书
南京南京观后感
2015/06/02 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
领导干部学习心得体会
2016/01/23 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers