zhilizhili-ui 抛弃amfe flexible布局去构建自己的布局

only_do 发布于2019-08-28 18:31 / 307人阅读

摘要：页面要适配更多的设备团队的链接阿里的有一个方案把直接定位这是为什么为什么要用判断众所周知用的是所以只要知道是否是就可以了不是并且是可以认为是的浏览器根据改变这没问题是不错的想法但是提出一个方案时不考虑用户仅仅只根据自己的业务要求就被大家认

h5页面要适配更多的设备

google 团队的device链接

阿里amfe的有一个flexible方案

amfe 把 android 直接定位1dpr 这是为什么

为什么要用navigator判断

众所周知 ios 用的是 safari

所以只要知道是否是safari 就可以了

var isSafari = /constructor/i.test(window.HTMLElement);

不是safari 并且是webkit 可以认为是android的浏览器

var isWebkit = "WebkitAppearance" in document.documentElement.style;

根据dpr 改变initial-scale=1 这没问题是不错的想法但是提出一个方案时不考虑android用户
仅仅只根据自己的业务要求就被大家认可这实在说不过去

rem 加 vw vh 才是王道

首先android很多浏览器不能加载vw vh这个必须要兼容

徐飞的rem layout可以兼容

sass 使用一个rem库

链接

为了加快布局速度

我们可以预设定一些值

$rem-baseline: 16px;

html {
    font-size: $rem-baseline;
}

@include screen("320px", "320px") {
    html {
        font-size: 16px !important;
    }
}

@include screen("360px", "360px") {
    html {
        font-size: 18px !important;
    }
}

@include screen("375px", "375px") {
    html {
        font-size: 18.75px !important;
    }
}

@include screen("412px", "412px") {
    html {
        font-size: 20.6px !important;
    }
}

@include screen("414px", "414px") {
    html {
        font-size: 20.7px !important;
    }
}

当然 rem 也会有反应不及时的问题所以最好快速进入vw vh时代

第一所有要兼容的css都必须通过预处理放置在head font-family里

方便json序列化可以随时改变真正实现全动态

var content = window.getComputedStyle(
    document.querySelector("head")
).fontFamily.replace(//g, "").replace(/"/g, "");

在转变成 px

这样连rem不准确的问题都解决

而且android 所用的dp 其实和vw 是效果相同的

所以抛弃filexible吧使用vw

超融合服务器 idc机房托管 html的布局布局遇到的问题类的内存布局 html盒子的布局

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

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

zhilizhili-ui 荡平ie8910 还我前端清净地

摘要：给大家带来一个目前最新版本的方案特色部分功能部分功能是因为无法和和谐共处无法使用真可惜无法在上使用也就无法解决这些问题了不过解决方案里会有我使用的是地址作为兼容方案那么作为一款快速开发的方案解决方案也是会有的我举个例子如果想要使用一个就可 zhilizhili-ui 给大家带来一个目前最新版本的ie8方案特色 flexbox部分功能 vw vh calc部分功能 angular1....

seasonley 2019-08-19 17:35 评论0 收藏0
zhilizhili-ui 荡平ie8910 还我前端清净地

摘要：给大家带来一个目前最新版本的方案特色部分功能部分功能是因为无法和和谐共处无法使用真可惜无法在上使用也就无法解决这些问题了不过解决方案里会有我使用的是地址作为兼容方案那么作为一款快速开发的方案解决方案也是会有的我举个例子如果想要使用一个就可 zhilizhili-ui 给大家带来一个目前最新版本的ie8方案特色 flexbox部分功能 vw vh calc部分功能 angular1....

doodlewind 2019-08-30 12:45 评论0 收藏0
zhilizhili-ui 荡平ie8910 还我前端清净地

摘要：给大家带来一个目前最新版本的方案特色部分功能部分功能是因为无法和和谐共处无法使用真可惜无法在上使用也就无法解决这些问题了不过解决方案里会有我使用的是地址作为兼容方案那么作为一款快速开发的方案解决方案也是会有的我举个例子如果想要使用一个就可 zhilizhili-ui 给大家带来一个目前最新版本的ie8方案特色 flexbox部分功能 vw vh calc部分功能 angular1....

lovXin 2019-08-01 15:04 评论0 收藏0
前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

摘要：前端最基础的就是。默认构建一个真实的设置为一个理想值追加到树中获取理想值和实际值的比例计算值进行比例换算移动端适配方案前端培训初级阶段之移动端适配原理参考文献淘宝弹性布局方案实践布局详解移动端自适应方案前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技...

FingerLiu 2019-08-02 16:18 评论0 收藏0
前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

摘要：前端最基础的就是。默认构建一个真实的设置为一个理想值追加到树中获取理想值和实际值的比例计算值进行比例换算移动端适配方案前端培训初级阶段之移动端适配原理参考文献淘宝弹性布局方案实践布局详解移动端自适应方案前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技...

xi4oh4o 2019-08-26 13:47 评论0 收藏0