[上海|结业弟子]JS-陈益杰|2019年10月14日的日报-技能树.IT修真院

发表于： 2019-10-14 23:49:06

1 815

今天完成的事情：

1 移动端调试，利用chrome浏览器，实现在电脑上调试手机页面

2 移动端1px问题产生及解决

明天计划的事情：

1 开始写项目

遇到的问题：

1 弄调试的时候手机链接电脑，浏览器中没有出现手机的链接信息

尝试了这个方法，无果：如果您的手机正在连接到计算机并在计算机上被识别，并且您已经在手机上启用了USB调试功能，但是该手机未出现在Chrome开发者工具的“远程设备”下，那么您可以先尝试重新启动通过在手机上选择以下内容来进行自动发现过程-“设置>开发者选项>撤销USB调试授权”。

之后又搜索了许久，发现是因为计算机上缺少或未运行Android Debug Bridge守护程序，下载独立的Android SDK平台工具后，解压，然后再当前文件夹打开命令行输入adb devices即可

收获：

1 移动端调试chrome浏览器 + android调试

第一步：打开android手机的usb调试。

第二步：通过usb链接电脑，弹出允许usb调试点击确认

第三步：给你的 Android 手机下载一个手机版的 Chrome浏览器 (各大应用商店自行搜索)，并在手机上的 Chrome浏览器中打开你需要调试的页面。

第四步：打开你电脑上的 Chrome浏览器，按下图标注顺序，依次点开。我使用的是小米5，你可以看到左侧有 MI 5 已连接的字样。划线的地方分别是手机上 Chrome浏览器和自带浏览器 WebView 下打开的页面

第五步：每个页面右侧都有一个 Inspect 检查的按钮，点击就会出现你熟悉的调试画面

2 移动端1px产生及解决方案

介绍：目前主流的屏幕DPR=2 | 3(苹果8，8P)。拿2倍屏来说，设备(物理)像素要实现1像素，而DPR( 物理像素和设备独立像素的比值)=2，所以css像素只能是0.5。UI图给的都是物理像素

总结：项目最好使用的是设置viewport的scale值，这个方法兼容性好，后期写起来方便。老项目的话，改起来可能比较多，用的比较多的方法就是伪元素+transform的方法。其他的背景图片，阴影的方法毕竟还是不太灵活，而且兼容性不好。

1 按比例缩小：2倍屏使用0.5px。

优点: 简单，无副作用

缺点：支持iOS 8+，不支持安卓。3倍频就不能缩了因为在Chrome上模拟iPhone 8P，发现小于0.46px的时候是显示不出来。

2 border-img：设置boeder为1px透明色，然后border-img引入图片，2倍屏图高2px，一半边框色，一半透明或元素背景色，裁剪为2。3倍屏图高3px，1/3边框色，2/3透明或元素背景色。或者一开始图片就设置高一点例如5px，边框色占1/5，其他全都透明或元素背景色，然后根据屏幕直接设置裁剪2或3就行了。这里裁剪指的是border-img-slice。是上下边框的设置，左右边框设置宽度其他一样。

优点：可设置单条，多条边框

缺点：修改颜色麻烦, 需要替换图片。圆角需要特殊处理，并且边缘会模糊

3 background-img：图片宽100%，高1px。定位到对应位置。其他同上

4 background：linear-gradient(···): 设置渐变色，宽100%，高1px，定位对应位置

优点：可设置单条，多条边框，颜色随意设置。

缺点：代码量大，圆角不能实现，多张背景图会有兼容问题

5 box-shadow：

，可直接设置四条。

优点：代码量少，可满足所有场景。

缺点：边框有阴影，颜色变浅

6 viewport + rem：监听devicePixelRatio的值，改变他的scale来达到2倍屏，3倍屏的物理像素

优点：所有场景都能满足，一套代码，可以兼容基本所有布局