上周开始接触移动web开发,默默的掉进了很多坑里面。本文主要总结本周遇到的坑以及如何填坑。

  1、px与rem换算。

  设计稿的宽度一般是640px,而iphone是320px,所以测量设计稿的结果首先要除2,这时的单位还是px,下一步要转换成rem,怎么转换呢?得看根节点怎么设置的。

  首先,任意浏览器的默认字体高都是16px,所有未经调整的浏览器都符合: 1em=16px;那么10px=0.625em;于是为了便于计算,可以为body设置font-size=62.5%;到这里,换算关系为10px=1rem。

  综上,设计稿的px,要除20变成rem,所以,我们设置一个变量unit=20,在less里面直接将设计稿的数值除以@unit即可。

  但并不是所有的地方都需要转换成rem,有些地方还是需要用px,比如某些不需要跟着设备变化而变化的文字,在这些地方的边距有的得用px,有的得用rem,还得多写代码才能如鱼得水。

  由于没有按照上述方法做,于是我挑战了自己的心算能力和耐性,哈哈哈……

2、1px线条在retina屏显示2px;

  这个问题在上一篇《移动web开发基础——像素》里面说明过产生原因。之所以还掉坑里,是因为开发时就忘了这个梗了……

  知道原因之后,我们就来解决问题。要在手机上呈现1px,我们得写0.5px,由于并不是所有的ios系统都支持0.5px,所以为了实现0.5px,我们可以把1px缩0.5倍,横线就纵向缩scaleY(0.5),竖线就横向缩scaleX(0.5)。

  其次是关于线条的插入方式,为了不影响html结构,最好通过before或after的伪类来插入空内容,然后设置边框1px,或宽高背景什么的。

  

  3、a链接按上去出现黑色背景;

  这个问题一行代码搞定:-webkit-tap-highlight-color:transparent;把它加到a的样式上去。

  4、html里不要使用img标签,图片都放到样式里面当背景。好处是可以二次压缩图片。

  

  移动开发还需积累经验啊,第一次花了好多时间各种量设计稿各种改代码各种找大神各种找资料,but,I enjoy it!

移动web开发填坑(一)的更多相关文章

  1. Java web 开发填坑记 2 -如何正确的创建一个Java Web 项目

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/72566261 本文出自[赵彦军的博客] Java web 开发填坑记 1-如何正确 ...

  2. Java Web 开发填坑记- 如何正确的下载 Eclipse

    一直以来,做 Java web 开发都是用 eclipse , 可是到 eclipse 官网一看,我的天 http://www.eclipse.org/downloads/eclipse-packag ...

  3. Android项目开发填坑记-Fragment的onBackPressed

    Github版 CSDN版 知识背景 Fragment在当前的Android开发中,有两种引用方式,一个是 Android 3.0 时加入的,一个是supportV4包中的.这里简称为Fragment ...

  4. Android项目开发填坑记-Fragment的onAttach

    背景 现在Android开发多使用一个Activity管理多个Fragment进行开发,不免需要两者相互传递数据,一般是给Fragment添加回调接口,让Activity继承并实现. 回调接口一般都写 ...

  5. Android项目开发填坑记-so文件引发的攻坚战

    故事的最初 我负责的项目A要求有播放在线视频的功能,当时从别人的聊天记录的一瞥中发现百度有相关的SDK,当时找到的是Baidu-T5Player-SDK-Android-1.4s,项目中Demo的so ...

  6. Flutter 开发填坑指南

    引言 第一次在使用Flutter是在Ubuntu机器上,但是因为Android Studio还有Sdk配置问题,flutter doctor总是在这一步报错...最近又在win10上配了一下环境(真香 ...

  7. 微信小程序开发填坑指南V1

    近期用了一星期的时间,开发了一个小程序.小程序名称是:小特Jarvis,取自钢铁侠的管家. 后台采用C#编写,WebAPI接口.其实开发时间并不多,小程序本身提供的API,相比公众号的API来说,已经 ...

  8. 微信小程序开发填坑

    1.模拟器和真机的差异 在开发的过程中,在模拟器上表现得好好的,在真机上却出问题的例子数不胜数.譬如动画的使用,cover-view上面使用定位,在模拟器好好的,在真机却错乱等等等等.造成这些错乱主要 ...

  9. [AI开发]DeepStream开发填坑记录

    下面是在deepstream使用过程中碰到的一些坑: (1)Pipeline中的Sink如果需要编码存文件或者推rtmp的流,注意控制编码的参数,编码质量不要太高.否则可能Sink带不动,整个Pipe ...

随机推荐

  1. js和jquery实现回到顶层

    js <!DOCTYPE html> <html> <head> <title>返回顶部</title> <style> bod ...

  2. Sql sever 分组排序

    维护人事的时候人事局要求加入一个新功能,详细需求例如以下:加入的人员在同一个单位的依照顺序编号而且单位也要实现时间排序,也就是说有两个排序,第一单位名称排序.先创建的一直在前.然后依照创建时间依次排序 ...

  3. IOS 字典模型互转框架 MJExtension

    IOS 字典模型互转框架 MJExtension   能做什么? MJExtension是一套字典和模型之间互相转换的超轻量级框架 MJExtension能完成的功能 字典(JSON) -->  ...

  4. WPF的WebBrowser屏蔽弹出脚本错误窗体

    WPF自带的WebBrowser在訪问一些有问题的网页时常常跳出非常多提示脚本错误的窗体, 可是WPF没有自带屏蔽这些窗体的方法或属性. 所以网上找来一使用反射的方法来屏蔽弹出脚本错误窗体的方法, 非 ...

  5. Vue框架之组件系统

    1,Vue组件系统之全局组件 1.1Vue全局组件的在实例化调用Vue的模板中导入组件的名称 <!DOCTYPE html> <html lang="zh-cn" ...

  6. 关于页面上输入框中 空格 、0 、NULL 的处理 示例

    ep.setPositionNum(get("positionNum").toString()); ep.setClasstype(get("classtype" ...

  7. 并不对劲的bzoj4199: [Noi2015]品酒大会

    传送门-> 又称普及大会. 这题没什么好说的……后缀自动机裸题……并不对劲的人太菜了,之前照着标程逐行比对才过了这道题,前几天刚刚把这题一遍写对…… 这题的输出和某两点相同后缀的长度有关,那么把 ...

  8. 牛客练习赛13D:幸运数字Ⅳ(康托展开) F:关键字排序

    链接:https://www.nowcoder.com/acm/contest/70/D 题目: 定义一个数字为幸运数字当且仅当它的所有数位都是4或者7. 比如说,47.744.4都是幸运数字而5.1 ...

  9. 关于final修饰符

    一:修饰成员变量 关于被final修饰的成员属性(常量)初始化赋值问题分为以下两种情况: 1.被static修饰符修饰:可以通过两种途径进行初始化赋值 ① 在常量被定义时进行初始化赋值 ② 在静态代码 ...

  10. 虚拟机安装hadoop

    1.用VMware建立两台虚拟机(Centos6.5)系统,并设立主机名为node1与node2 2.设置虚拟机网络两台都是设置为如图: 3.修改两台虚拟机的/etc/hosts的文件为 (其中192 ...