移动端
2020-04-16 11:09:09 0 举报AI智能生成
前端移动端知识点总结
作者其他创作
大纲/内容
dpr
the resolution in physical pixels / the resolution in CSS pixels
移动端最小触控区域
44*44px
移动端适配方案
rem
px2rem
动态对html根元素的font-size进行修改，
在页面初次加载以及window触发resize事件时
修改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
设计稿统一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 方案也没有优点
个人认为比 rem 麻烦，
相对 rem 方案也没有优点
vw : 1vw 等于 视口宽度 的 1%
vh : 1vh 等于 视口高度 的 1%
vmin : 选取 vw 和 vh 中 最小 的那个
vmax : 选取 vw 和 vh 中 最大 的那个
vh : 1vh 等于 视口高度 的 1%
vmin : 选取 vw 和 vh 中 最小 的那个
vmax : 选取 vw 和 vh 中 最大 的那个
使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本，布局高宽，间距 等，
使得这些元素能够随视口大小自适应调整。
// 以1080px作为设计稿基准
$vw_base: 1080
@function vw($px) {
@return($px / 1080) * 100vw
}
我的想法：以后每次都要用 vw 这个方法？那写起来很复杂呀
使得这些元素能够随视口大小自适应调整。
// 以1080px作为设计稿基准
$vw_base: 1080
@function vw($px) {
@return($px / 1080) * 100vw
}
我的想法：以后每次都要用 vw 这个方法？那写起来很复杂呀
不足
存在一些兼容性问题，Android4.4以下不支持
媒体查询
优势
能够使网页在不同设备、不同分辨率屏幕上呈现合理布局，不仅仅是样式伸缩变换
不足
- 要匹配足够多的设备与屏幕，一个web页面需要多个设计方案，工作量大
- 通过媒体查询技术需要设置一定量的断点，到达某个断点前后的页面发生显著变化，
用户体验不太友好
参考
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>
同时要考虑兼容性问题。
<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 方法按照相应的比率缩小伪元素的高度或者宽度。
将伪元素绝对定位，
借助媒体查询，用 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);}
}
}
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;
}
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;
}
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>数据类型。
其结果属于<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> ]
[ <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.
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
}
// 多个背景
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 调用。
这些 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 的执行结果。这是一个异步掉用。
这个调用看起比上面的正常，而且更像是一个方法调用。
webView.evaluateJavascript(scriptString, new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
}
});
其中 scriptString 为 Javascript 代码，ValueCallback 的用来获取 Javascript 的执行结果。这是一个异步掉用。
这个调用看起比上面的正常，而且更像是一个方法调用。
Javascript 如何调用 java
先在 Javascript 环境中
注入一个 Java 代理
注入一个 Java 代理
class JavaProxy{
@JavascriptInterface //注意这里的注解。出于安全的考虑，4.2 之后强制要求，不然无法从 Javascript 中发起调用
public void javaFn(){
//xxxxxx
};
}
webView.addJavascriptInterface(new JavaProxy();, "java_proxy");
@JavascriptInterface //注意这里的注解。出于安全的考虑，4.2 之后强制要求，不然无法从 Javascript 中发起调用
public void javaFn(){
//xxxxxx
};
}
webView.addJavascriptInterface(new JavaProxy();, "java_proxy");
在 Javascript 环境中
直接调用 Java 代理
上的方法即可
直接调用 Java 代理
上的方法即可
java_proxy.javaFn();
参考
https://blog.csdn.net/yuzhengfei7/article/details/93468914
https://www.cnblogs.com/xesam/p/5402985.html
职业：本科
0 条评论
下一页
