![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
移动端
浅色流年
当我不在写代码,请@我
展开
-
01_移动端基础
基本概念:屏幕尺寸:屏幕对角线长度(英寸) 1英寸=2.54cm屏幕分辨率:横纵向上像素点数(物理像素)屏幕密度:每英寸上物理像素个数高清屏:一种具备超高像素密度的液晶屏;同样大小屏幕上显示物理像素点数由一个变为多个,高清屏和普通屏相比,相同区域的物理像素点,高清屏是普通屏的4倍视口尺寸:代表横纵向上css像素个数4个像素 3个视口 2个操作 1个比例4个像素...原创 2018-10-11 16:34:07 · 176 阅读 · 0 评论 -
02_移动端适配
meta标签<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />移动端适配rem适配>rem单位: 根标签的font-size所代表的值>步骤 1....原创 2018-10-11 16:35:03 · 108 阅读 · 0 评论 -
03_移动端事件基础
移动端事件基础queryselector的坑queryselectorAll:静态列表queryselector:静态列表的第一个移动端事件移动端事件:触屏事件、指针时间(用的少)移动端: touchstart touchmove(不可能单独触发) touchendpc端: mousedown mousemove(可以单独触发) mouseup阻止事件的默认行为,阻...原创 2018-10-11 16:36:17 · 132 阅读 · 0 评论 -
04_Font Boosting
什么是Font BoostingFont Boosting是Webkit 给移动端浏览器提供的一个特性:当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大,保证在即不需要左右滑动屏幕,也不需要双击放大屏幕内容的前提下,也可以让人们方便的阅读页面中的文本。Font Boost...原创 2018-10-11 16:37:03 · 317 阅读 · 0 评论 -
05_一物理像素的实现
一物理像素的实现rem+系统缩放1.主体适配采用rem适配 并放大rem的基值(dpr倍)2.再通过系统缩放 缩回dpr倍,initial-scale=1/dpr(function(){ var dpr = window.devicePixelRatio||1; var styleNode = document.createElement("style"); var w = do...原创 2018-10-11 16:37:41 · 573 阅读 · 0 评论 -
00_移动端单词
viewport ['vju:pɔ:t] n. 视口,观察孔layout ['leɪaʊt] n. 布局;设计;安排;陈列 layout viewport 布局视口visual ['vɪʒjʊəl] adj. 视觉的,视力的;栩栩如生的 visual viewport 视觉视口device [dɪ'vaɪs] n. 装置;策略;图案;设备pixel ['pɪks(ə)l] ...原创 2018-10-11 16:38:53 · 247 阅读 · 0 评论