手机端用rem+scss做适配

BDEEFE 发布于2019-08-21 17:38 / 3507人阅读

摘要：注意若值为将会占据页面位置，浮在页面上方会覆盖页面高度和的屏幕为。

设置meta标签

// 以上是清浏览器缓存用的搜索

//忽略页面的数字为电话，忽略email识别

//iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

//iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

// 去掉winphone系统a、input标签被点击时产生的半透明灰色背景

//强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放

js设置html的默认字体大小（写在html头部）

设置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);
}

云服务器 GPU云服务器手机网页js适配手机 php网站适配手机 js手机页面适配 webrtc适配手机浏览器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89803.html

手机端用rem+scss做适配

摘要：注意若值为将会占据页面位置，浮在页面上方会覆盖页面高度和的屏幕为。设置meta标签 // 以上是清浏览器缓存用的搜索 //忽略页面的数字为电话，忽略email识别 //iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； //iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；在web app应用下状态条（屏幕顶部条）的颜色；默...

fanux 2019-08-29 13:49 评论0 收藏0
CSS9:动态 REM-手机专用的自适应方案

摘要：一定要强制自己用命令行，强制自己学英语，强制自己看文档。只有这三条都做了，才有可能成为前端水平的程序员。设计师的设计稿宽度需要统一那么相应得，这时会将自动变成宽度为的情况下这样就无需在手动换算的值了。 CSS9:动态 REM-手机专用的自适应方案动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,例如 : taobao.com 是专门的PC端m.taobao.com 是...

ityouknow 2019-08-02 10:52 评论0 收藏0
CSS9:动态 REM-手机专用的自适应方案

摘要：一定要强制自己用命令行，强制自己学英语，强制自己看文档。只有这三条都做了，才有可能成为前端水平的程序员。设计师的设计稿宽度需要统一那么相应得，这时会将自动变成宽度为的情况下这样就无需在手动换算的值了。 CSS9:动态 REM-手机专用的自适应方案动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,例如 : taobao.com 是专门的PC端m.taobao.com 是...

joyqi 2019-08-30 15:54 评论0 收藏0
rem适配移动设备

摘要：前言移动端适配方案回顾总结如何使用单位的计算参考的根节点进行计算，根节点的字体变化，布局参考的页面也会相应进行缩放，此为布局的本质。动态改变的值几乎在每个浏览器都将的初始化为，我们动态改变的话可以暂时将设置为适配的根节点初始值。前言移动端 rem 适配方案回顾总结如何使用 rem rem 单位的计算参考 html 的根节点 font-size进行计算，根节点的字体变化，布局参考的...

韩冰 2019-08-29 18:41 评论0 收藏0