移动端解决方案学习记录

honhon 发布于2019-08-30 13:13 / 3279人阅读

摘要：先附上参考资料链接移动端适配方案上移动端适配方案下可伸缩布局方案一个的值转值的自动完成插件。

先附上参考资料链接；

移动端适配方案(上)

移动端适配方案(下)

可伸缩布局方案

一个CSS的px值转rem值的Sublime Text 3自动完成插件。

最终测试了 lib-flexible 的用法；

测试代码如下：

html结构





    
    Document
    
    



    
        1rem === 100px
        
    
    
        2rem == 200px
        
    
    
        3rem == 300px
        
    
    
        4rem == 400px

css样式

div {
    margin: 0.133333rem 0;
}

img {
    width: 100%;
}

.test1 {
    border: 0.013333rem solid red;
    width: 1.333333rem;
}

.test2 {
    border: 0.013333rem solid red;
    width: 2.666667rem;
}

.test3 {
    border: 0.013333rem solid red;
    width: 4.0rem;
}

.test4 {
    border: 0.013333rem solid red;
    width: 5.333333rem;
}

.test5 {
    border: 0.013333rem solid red;
    width: 6.666667rem;
}

效果展示

iphone6

iphone6 Plus

Galaxy Note3

以上是三种设备下面的效果图；
为了测试结果是真跟效果图尺寸一样；特此，我在ps中比对了（将其他的尺寸的手机等比例放大缩小到iphone6 plus 的尺寸）一下，如下；

总结：

将方案js加入项目中，

所有的尺寸用成rem来替换；

rem替换快捷方法

sublime 的插件

安装步骤

下载本项目，

进入packages目录：Sublime Text -> Preferences -> Browse 打开packges目录

复制下载的cssrem目录到packges目录里。

重启Sublime Text。

进入sublime Preferences -> packge settings -> cssrem -> setting-default 复制

进入 setting-user 将复制的文本粘贴到里面(因为webapp一般尺寸设计按照iphone6 (750px) 来设计，所以，将"px_to_rem" 值改为 75 )修改如下

{
    "px_to_rem": 75,
    "max_rem_fraction_length": 6,
    "available_file_types": [".css", ".less", ".sass"]
}

方案用法

比如 ui 给的一张 750 x 1334 的效果图（贴心的ui会直接标记尺寸大小，好喜欢有没有）

没有尺寸就自己量喽；有一张图片100px x 100px ；因为有 cssrem 插件所以直接按照真是的px宽度来写，插件会自己编译计算出750px宽度对应的rem尺寸；

GPU云服务器云服务器移动端适配方案移动端海外移动端移动端推送

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

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

移动端解决方案学习记录

摘要：先附上参考资料链接移动端适配方案上移动端适配方案下可伸缩布局方案一个的值转值的自动完成插件。先附上参考资料链接；移动端适配方案(上) 移动端适配方案(下) 可伸缩布局方案一个CSS的px值转rem值的Sublime Text 3自动完成插件。最终测试了 lib-flexible 的用法；测试代码如下： html结构 Document ...

GT 2019-08-01 16:05 评论0 收藏0
移动端监听安卓手机返回键

摘要：场景相信大家用安卓手机使用的过程中，会遇到这样的一个场景按下手机的返回键时，会弹出一个询问框是否退出该页面然后点击了确认键才真正退出。主要需求安卓手机用户按下返回键不后退网页。【场景】相信大家用安卓手机使用APP的过程中，会遇到这样的一个场景：按下手机的返回键时，会弹出一个询问框：是否退出该页面/APP?,然后点击了确认键才真正退出APP。PC端目前可以通过页面的转场实现。那这样的...

DesGemini 2019-08-22 16:35 评论0 收藏0
后端开发者从零做一个移动应用（一）

摘要：最近终于痛定思痛，做了一个应用，目前的产品确实很一般，但决定以此为起步，逐步完善逐步提高。是以提供游戏下载游戏礼包发放为核心的移动端应用。可以简单理解成一个游戏的应用市场。在写后端的时候，产出了一个基于的授权的。移动互联网时代，我不想只当一个后端工程师，是时候学习一些新的东西了！一直以来想要学习一些前端的知识，扩宽自己的技术栈，但是一直以来对前端都是进行了解，没有用一个产品把这些东...

galaxy_robot 2019-06-27 16:50 评论0 收藏0
使用vue开发移动端管理后台

摘要：独立完成一个移动端项目不是很明白为何会有这样的商品管理后台，还是有些经验不足，包括对产品的全局思考，对插件的选择等，都有考虑不周的缺点，导致自己中途想换图形界面插件，浪费了点时间，这里记录下，总结下经验，理一下思路。独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台)，还是有些经验不足，包括对产品的全局思考，对插件的选择等，都有考虑不周的缺点，导致自己中途想换图形界面插件，...

simpleapples 2019-08-23 15:42 评论0 收藏0
Win10应用设计的那些事儿

摘要：如何挑选合适的导航结构导航设计是应用设计的关键，设计规范以下简称规范中将导航元素分为对等层次和历史导航等几类，例如表和透视表导航窗格是对等导航元素，中心大纲细节属于分层导航元素，返回则属于历史导航元素。此文已由作者杨凯明授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。继Windows 10系统发布之后，很多Windows用户更新了系统。win10系统的发布，...

ad6623 2019-06-28 11:00 评论0 收藏0