移动端

移动端

dpr

 the resolution in physical pixels / the resolution in CSS pixels 

移动端最小触控区域

44*44px

移动端适配方案

rem

px2rem

动态对html根元素的font-size进行修改，在页面初次加载以及window触发resize事件时修改html根元素的font-size

预设：设计稿统一750pxpx2rem 的 remunit=75pxeleDesignSize:元素在设计稿上的尺寸eleCssSize:写在css文件中的元素的尺寸，数值与eleDesignSize相等，即：eleCssSize==eleDesignSizedeviceWidth:手机宽度remunit:px2rem里面设置的rem单位rootFontSize:html根元素的font-size因为1. eleCssSize/remunit * rootFontSize == deviceWidth/750*eleDesignSize2. eleCssSize==eleDesignSize所以1/remunit*rootFontSize==deviceWidth/750所以rootFontSize==deviceWidth/750*remunit当 remunit==75 时，rootFontSize==deviceWidth/10

vh/vw方案个人认为比 rem 麻烦，相对 rem 方案也没有优点

vw : 1vw 等于 视口宽度 的 1%vh : 1vh 等于 视口高度 的 1% vmin : 选取 vw 和 vh 中 最小 的那个vmax : 选取 vw 和 vh 中 最大 的那个

使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本，布局高宽，间距 等，使得这些元素能够随视口大小自适应调整。// 以1080px作为设计稿基准$vw_base: 1080@function vw($px) { @return($px / 1080) * 100vw}我的想法：以后每次都要用 vw 这个方法？那写起来很复杂呀

不足

存在一些兼容性问题，Android4.4以下不支持

媒体查询

优势

能够使网页在不同设备、不同分辨率屏幕上呈现合理布局，不仅仅是样式伸缩变换

要匹配足够多的设备与屏幕，一个web页面需要多个设计方案，工作量大通过媒体查询技术需要设置一定量的断点，到达某个断点前后的页面发生显著变化，用户体验不太友好

参考

https://www.jianshu.com/p/2c33921d5a68

图片处理

Image-set

参考链接

1px 边框

产生原因

在像素比等于2的屏幕中，css设置的1px会被渲染成2px的物理像素，看起来会比较粗。

解决

伪元素 + transform 实现（用的多）

利用 :before 或者 :after 伪元素实现 border ，将伪元素绝对定位，借助媒体查询，用 transform 的 scale 方法按照相应的比率缩小伪元素的高度或者宽度。

单边

.scale-1px{ position: relative; border:none;}.scale-1px:after{ content: ''; position: absolute; bottom: 0; width: 100%; height: 1px;background: #000; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0;}font color=\"#0076b3\

四边

.scale-1px{ position: relative; margin-bottom: 20px; border:none;}.scale-1px:after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top;}

背景渐变实现

设置1px的渐变背景，50%有颜色，50%透明。很多UI都是采用这种方法，比如：weui、mint-ui...

相关 CSS 属性与函数

linear-gradient()

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。

语法

background-origin

font color=\"#c41230\

.background-gradient-1px {// font color=\"#c41230\

https://www.cnblogs.com/chenwenhao/p/9350425.html

JSBridge

是什么

JSBridge 是 Native 和非 Native 之间的桥梁，它的核心是构建 Native 和非 Native 间双向通信的通道

原理

JavaScript 是运行在一个单独的 JS Context 中（例如，WebView 的 Webkit 引擎、JSCore）。这些 Context 与原生运行环境的天然隔离，我们可以将这种情况与 RPC（Remote Procedure Call，远程过程调用）通信进行类比，将 Native 与 JavaScript 的每次互相调用看做一次 RPC 调用。

实现

java 如何调用 Javascript

使用 Android Sdk 提供的交互方法

webView.loadUrl(\"javascript:scriptString\"); //其中 scriptString 为 Javascript 代码

Javascript 如何调用 java

先在 Javascript 环境中注入一个 Java 代理

class JavaProxy{  @JavascriptInterface //注意这里的注解。出于安全的考虑，4.2 之后强制要求，不然无法从 Javascript 中发起调用  public void javaFn(){    //xxxxxx  }; } webView.addJavascriptInterfaceb style=\

在 Javascript 环境中直接调用 Java 代理上的方法即可

java_proxy.javaFn();

https://blog.csdn.net/yuzhengfei7/article/details/93468914

https://www.cnblogs.com/xesam/p/5402985.html