flexible

darkbug 发布于2019-08-22 17:05 / 3040人阅读

摘要：遇到了什么问题其实就一句话，怎么保证设计稿在不同型号不同分辨率的手机上面进行高保真的还原业界怎么解决其实也是一句话，设计师提供要支持的主流机型分辨率大小的设计稿，然后前端在符合该分辨率的机型下进行还原，其他分辨率机型下进行等比例的缩放设计师

1.遇到了什么问题

其实就一句话，怎么保证设计稿在不同型号不同分辨率的手机上面进行高保真的还原？

2.业界怎么解决

其实也是一句话，设计师提供要支持的主流机型分辨率大小的设计稿，然后前端在符合该分辨率的机型下1：1进行还原，其他分辨率机型下进行等比例的缩放；

2.1. 设计师提供的设计稿的宽高是多少？

每个公司的标准不一样，我司是750px * 1334px，即按照iPhone6的设备像素大小来提供；（设备像素就是你的屏幕上面横宽有多少物理像素点）

2.2. 前端怎么写代码？

比如量到设计稿上面有一个100px * 100px 的元素，那么在代码里面我们就先写
.wrapper {
    width: 100px;
    height: 100px;
}
效果如下图：

![clipboard.png](/img/bVbaejl)

很明显不是我们期待的效果，为什么呢？
因为我们潜意识里面认为，代码里面的1px === 设备像素里面的1px；

其实，并不是这样；
那么，代码里面的1px =? 设备像素里面的1px呢？
答案是，看你设备的 layout viewport大小，而它也决定着默认情况下根元素的宽；在iPhone6里面layout viewport的宽是980px，所以就看到了上面那样100px的方块那么小；

那么，怎么改layout viewport大小呢？
答案是，通过meta标签，，我们这里把它改成750px，效果如下图：

![clipboard.png](/img/bVbafKa)

那么此时，代码里面的1px === 设备像素里面的1px === 设计稿里面的1px；

2.3. 不同设备怎么等比例缩放？ 2.4. 上面的缩放方案会有什么问题？

图片模糊、字体、1px

GPU云服务器云服务器 flexible

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

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

说说vue-cli中使用flexible和px2rem-loader

摘要：下载或在项目中引入一般情况在中引入设置标签视情况而定安装或在中配置，在项目文件中找到，将添加到中，，下的根据设计稿而定具体如下编译新加由于设计稿是添加到里面省略项目中使用假设设计稿和分别是，具体代码 1.下载lib-flexible npm i lib-flexible --save 或 yarn add lib-flexible 2.在项目中引入lib-flexible 一般情况在...

Heier 2019-08-23 15:31 评论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
前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

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

psychola 2019-08-30 10:54 评论0 收藏0
flexible 精简版

摘要：看了源码，不懂为什么对于没有缩放，而是粗放设置，导致很不精细，于是略微删减代码如下，留着自己备用，后续如果再学到了什么知识点，再回顾吧。本质上就是把设置成物理像素大小，再缩小到屏幕独立像素这么大限制最大为看了 flexible 源码，不懂为什么对于android 没有缩放，而是粗放设置，导致 android 很不精细，于是略微删减代码如下，留着自己备用，后续如果再学到了什么知识点，再...

OnlyMyRailgun 2019-08-29 11:31 评论0 收藏0
flexible 精简版

摘要：看了源码，不懂为什么对于没有缩放，而是粗放设置，导致很不精细，于是略微删减代码如下，留着自己备用，后续如果再学到了什么知识点，再回顾吧。本质上就是把设置成物理像素大小，再缩小到屏幕独立像素这么大限制最大为看了 flexible 源码，不懂为什么对于android 没有缩放，而是粗放设置，导致 android 很不精细，于是略微删减代码如下，留着自己备用，后续如果再学到了什么知识点，再...

Java3y 2019-08-20 12:03 评论0 收藏0