首页  思维导图  详情

移动端

2020-04-16 11:09:09   0  举报





AI智能生成

前端移动端知识点总结

前端开发

移动端开发

1px边框

JSBridge

作者其他创作

大纲/内容

dpr

 the resolution in physical pixels / the resolution in CSS pixels 

移动端最小触控区域

44*44px

移动端适配方案

rem

px2rem

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

预设： 设计稿统一750px px2rem 的 remunit=75px eleDesignSize:元素在设计稿上的尺寸 eleCssSize:写在css文件中的元素的尺寸，数值与eleDesignSize相等， 即：eleCssSize==eleDesignSize deviceWidth:手机宽度 remunit:px2rem里面设置的rem单位 rootFontSize:html根元素的font-size 因为 1. eleCssSize/remunit * rootFontSize == deviceWidth/750*eleDesignSize 2. 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以下不支持

媒体查询

优势

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

不足

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

参考

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

图片处理

Image-set

对于背景图片，使用image-set根据用户设备的分辨率匹配合适的图像， 同时要考虑兼容性问题。 <style> .css { background-image: url(1x.png); /*不支持image-set的情况下显示*/ background: image-set( url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */ url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */ url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */ ); } </style>

参考链接

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

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; } @media (-webkit-min-device-pixel-ratio: 3), /* Webkit-based browsers */ (min--moz-device-pixel-ratio: 3), /* Older Firefox browsers (prior to Firefox 16) */ (min-resolution: 3dppx) /* The standard way */{   .scale-1px:after:{     -webkit-transform:scaleY(0.333);     transform:scaleY(0.333);}   } }

四边

.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...

单边

.background-gradient-1px { background-image: linear-gradient(180deg, #000, #000 50%, transparent 50%); background-size: 100% 1px; background-repeat: no-repeat; background-position: bottom left; background-origin: border-box; }

相关 CSS 属性与函数

linear-gradient()

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

语法

linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> ) \-------------------------/ \----------------------------/     Definition of the gradient line          List of color stops where <side-or-corner> = [ left | right ] || [ top | bottom ] and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ]

background-origin

The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

四边

.background-gradient-1px { // 多个背景 background: linear-gradient(90deg,red, red 50%, transparent 50%) left / 1px 100% no-repeat, linear-gradient(90deg,blue, blue 50%, transparent 50%) right / 1px 100% no-repeat, linear-gradient(purple, purple 50%, transparent 50%) top / 100% 1px no-repeat, linear-gradient(green, green 50%, transparent 50%) bottom / 100% 1px no-repeat }

参考链接

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 代码

在 KITKAT 之后，又新增了一个方法： webView.evaluateJavascript(scriptString, new ValueCallback<String>() {   @Override   public void onReceiveValue(String value) { } }); 其中 scriptString 为 Javascript 代码，ValueCallback 的用来获取 Javascript 的执行结果。这是一个异步掉用。 这个调用看起比上面的正常，而且更像是一个方法调用。

Javascript 如何调用 java

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

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

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

java_proxy.javaFn();

参考

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

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