资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/zhilizhili-ui 抛弃amfe flexible布局 去构建自己的布局

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

only_do / 433人阅读

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

h5页面要适配更多的设备

google 团队的device链接

阿里amfe的有一个flexible方案

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

为什么要用navigator判断

众所周知 ios 用的是 safari

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

</>复制代码 
  1. var isSafari = /constructor/i.test(window.HTMLElement);

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

</>复制代码 
  1. var isWebkit = "WebkitAppearance" in document.documentElement.style;

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

rem 加 vw vh 才是王道

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

徐飞的rem layout可以兼容

sass 使用 一个rem库

链接

为了加快布局速度

我们可以预设定一些值

</>复制代码 
  1. $rem-baseline: 16px;
  2. html {
  3.     font-size: $rem-baseline;
  4. }
  5. @include screen("320px", "320px") {
  6.     html {
  7.         font-size: 16px !important;
  8.     }
  9. }
  10. @include screen("360px", "360px") {
  11.     html {
  12.         font-size: 18px !important;
  13.     }
  14. }
  15. @include screen("375px", "375px") {
  16.     html {
  17.         font-size: 18.75px !important;
  18.     }
  19. }
  20. @include screen("412px", "412px") {
  21.     html {
  22.         font-size: 20.6px !important;
  23.     }
  24. }
  25. @include screen("414px", "414px") {
  26.     html {
  27.         font-size: 20.7px !important;
  28.     }
  29. }

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

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

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

</>复制代码 
  1. var content = window.getComputedStyle(
  2.     document.querySelector("head")
  3. ).fontFamily.replace(//g, "").replace(/"/g, "");

在转变成 px

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

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

所以抛弃filexible吧 使用vw

GPU云服务器 云服务器 html的布局 布局遇到的问题 类的内存布局 html盒子的布局

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

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

相关文章

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

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

    seasonley 评论0 收藏0

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

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

    doodlewind 评论0 收藏0

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

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

    lovXin 评论0 收藏0

  • 前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

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

    FingerLiu 评论0 收藏0

  • 前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

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

    xi4oh4o 评论0 收藏0

发表评论

登陆后可评论

0条评论

only_do

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<