![](https://img-blog.csdnimg.cn/20210830231927469.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
移动web开发
文章平均质量分 82
学习分享,感谢支持!
爱划水de鲸鱼哥~
一只自由生长的野生程序猿
展开
-
移动Web开发入门(一) -- 像素、媒体查询、em、rem
文章目录一、移动Web开发二、基本概念分辨率物理像素CSS像素物理像素和CSS像素的关系设备像素比(dpr)获取dprPPI 、 DPI视口(viewport)设置 Viewport获取视口宽度三、媒体查询媒体类型媒体查询的逻辑关系媒体特征表达式常用媒体尺寸四、移动端常用单位pxemremvw/vh一、移动Web开发移动web开发是指针对手机、平板电脑等移动设备的web开发。二、基本概念分辨率分辨率(resolution,又称解析度)指显示器所能显示的像素的多少,显示器可显示的像素越多,画面就越精原创 2021-08-23 12:59:06 · 448 阅读 · 2 评论 -
移动Web开发入门(二) -- rem屏幕适配
文章目录rem屏幕适配简单屏幕适配方案原理代码实现页面效果缺点1像素边框问题通用屏幕适配方案原理代码实现优化rem屏幕适配通过使用rem单位使网页,在不同屏幕尺寸下正常显示的一种移动端开发方案。简单屏幕适配方案resize 事件是在浏览器窗口被重置时触发的,如当用户调整窗口大小,或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。Document.documentElement 是一个会返回文档对象(document)的根元素的只读属性(如HTML文档的 <html>原创 2021-08-27 11:17:55 · 223 阅读 · 0 评论 -
移动Web开发入门(三) -- touch事件
文章目录touch事件touch事件分类代码演示页面效果点击红色区域未移动点击红色区域,移动到红色区域抬起点击红色区域,移动到红色区域外抬起在红色区域外点击,移动到红色区域抬起在红色区域外点击,穿过红色区域移动到红色区域外抬起event对象控制台打印event对象控制台打印changedTouches对象扩展HAMMER.JStouch事件touch事件是移动端特有的,由于移动端设备大都具备触摸功能,所以移动端浏览器都引入了触摸 touch事件。 touch相关的事件跟普通的其他dom事件一样使用,可以原创 2021-08-27 23:18:27 · 369 阅读 · 0 评论 -
移动Web开发入门(四) -- 移动端调试
文章目录移动端调试浏览器调试进入控制台进入浏览器模拟器调试切换测试机型添加测试机型改变屏幕尺寸,改变DPR改变网络情况改变屏幕显示大小横/竖屏切换真机测试扩展远程调试工具 -- vorlon.js多终端调试工具 -- browsersync移动端调试移动端调试可以查看页面效果是否符合预期,不符合进行修改。浏览器调试以CSDN首页为例;进入控制台首先按Ctrl + Shift + I(或点击鼠标右键选择检查菜单项)进入控制台:进入浏览器模拟器调试按Ctrl + Shift + M(或点击原创 2021-08-29 22:54:17 · 645 阅读 · 0 评论 -
移动Web开发入门(五) -- 性能优化
文章目录性能移动端为什么进行性能优化HTML性能优化CSS、JS代码引入方式优化内联外部文件引入CSS、JS代码位置优化代码的压缩与合并文件缓存图片优化大图片优化小图片优化其他优化CSS性能优化CSS选择器优化CSS属性优化JS性能优化DOM操作优化事件优化懒加载和预加载懒加载预加载性能性能简单说就是我们使用网站的响应速度,以及网页交互的流畅程度;移动端为什么进行性能优化提升用户体验;移动端网络速度较慢;移动设备性能较低;HTML性能优化CSS、JS代码引入方式优化在HTML中引入CS原创 2021-08-30 15:56:42 · 141 阅读 · 0 评论 -
移动Web开发入门(六) -- 移动端常见问题
文章目录H5标签兼容性Can I usehtml5shivclick 300ms延时根本原因解决方法方法一、禁用缩放方法二、FastClick单行文本溢出隐藏多行文本溢出隐藏H5标签兼容性Can I use使用Can I use可以查询,H5标签在各个浏览器的兼容情况,绿色表示完全支持,黄色表示部分支持,红色表示不支持。html5shivhtml5shiv 是一个 IE 浏览器的 HTML5 JavaScript 补丁,可以让 IE 浏览器识别并支持 HTML5 标签。click 300ms原创 2021-08-30 23:13:31 · 134 阅读 · 0 评论