PC端开发:页面主要运行在PC端浏览器中
移动端开发:页面主要运行在手机上
移动web开发在移动端表现良好的页面,如新浪网
混合式开发(Hybrid App)也叫“套壳开发”,通过写特定的代码生成跨平台的web app,可以用一些前端native开发框架或者是在移动端网页的基础上打包生成app。
移动端web app开发web app比较接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能,如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能;web app特指的是用html5技术开发,在开发中使用一些浏览器私有的方法,使web页面拥有一些native的功能
物理像素(physical pixel)也可成为设备像素(dp:device pixel),显示屏是由一个个物理像素点组成的,通过控制每个像素点的颜色,使屏幕显示出不同的图像,其与设备有关,不可改变。实际开发中不用,其单位为pt
设备像素比(dpr:device pixel ratio),即dpr = 设备像素 / CSS像素(缩放比是1的情况下)
标清屏幕:dpr=1;
高清屏幕:dpr>=2
缩放改变的是CSS像素的大小
按照以上的物理像素比,对于一张50px * 50px 的图片,在手机打开时就会放大倍数,这将会造成图片模糊。在标准的viewport设置中,使用多倍图来提高图片质量,解决高清设备中的模糊问题。通常采用的是二倍图。
视口在PC端是指浏览器显示页面内容的屏幕区域;视口在移动端视口分为三个:
maximun-scale=1,minimun-scale=1:相当于不允许用户缩放
- `<meta>`视口标签设置:标准的viewport参数设置 - 视口宽度与设备保持一致 - 视口的默认缩放比例为1.0 - 不允许用户缩放 - 最大与最小缩放比为1.0 123456
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"> 1
小结:视口就是浏览器显示页面内容的屏幕区域,移动端视口分为布局视口、视觉视口以及理想视口。在移动端布局中,想要的理想视口就是屏幕有多宽,布局视口就有多宽,需要手动通过设置视口标签来完成。
阿里巴巴矢量库
媒体查询(media query),是响应式设计的基础。其有三点作用
@media 媒体类型 and (媒体功能:值){ // 满足条件的css样式代码 } 123
媒体类型
all 适用于所有类型
print 适用于打印机和打印预览
screen 适用于电脑屏幕、平板电脑、智能手机等
speech 适用于屏幕阅读器
媒体功能
逻辑运算符
not:用来排除某种设备。比如,排除打印设备 @media not print;only:用以指定某特定媒体设备。对于支持 Media Queries 的移动设备来说,如果存在 only 关键字,移动设备的 Web 浏览器会忽略 only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries 的设备但能够读取 Media Type 类型的 Web浏览器,遇到 only 关键字时会忽略这个样式文件。all:适用于所有的设备类型;and:媒体查询中使用来连接多种媒体特性,一个媒体查询中可以包含0或多个表达式,表达式可以是0或多个关键字,以及一种媒体类型。引入media的方法
(1)直接写在CSS样式中@media all and (min-width: 321px) and (max-width: 400px){ .box{ background: red; } } 12345
媒体类型为all,代表任何设备,并且设备的布局视口宽度大于等于321px且小于等于400px时,让拥有box类的元素背景变红。
(2)针对不同的媒体设备外部链入不同的 stylesheets(外部样式表)<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> 1 (3)写在内部样式
<style> @media screen and(max-width:640px){ h1{background:red;} } @media screen and (min-width:640px) and (max-width:960px) { h1{background:red;} } </style> 12345678 浏览器兼容
移动端常用rem做单位,将页面的元素统一地进行等比例缩放
setRemUnit(); window.onresize = setRemUnit; // 获取视口宽度 function setRemUnit(){ var docElement = document.documentElement; var viewWidth = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width; docElement.style.fontSize = viewWidth / 375 * 20 + 'px'; // 1rem = 20px 在375px的视口宽度下 } 123456789101112
创建一个流式布局:
创建一个<meta>标签,设置视口:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"> 1
如,导航器5等分
.nav ul { width:100%; } .nav li { width:20%; } 123456
弹性布局
(1)em和rem
em: 相对于当前元素的字体大小→ 1em = 当前标签的font-size,浏览器默认的font-size的大小为16px
rem: 相对于根元素(html)的字体大小→ 1rem = html标签的font-size
(2)rem布局的原理
通过媒体查询的方式动态改变html标签的font-size大小当屏幕越大(小),让html标签的font-size变大(小)即可(3)rem布局的优点
rem布局,盒子适配所有的屏幕,并且可以在多个屏幕大小中完美还原设计图(等比例缩放)(4)rem布局的使用方法
导入rem.js,让1 rem=当前屏幕的1/10(function(){var calc = function(){var rem = document.documentElement.clientWidth/10;document.documentElement.style.fontSize = rem + 'px';rem = document.documentElement.clientWidth > 750?37.5:rem;// console.log(rem);}calc();window.addEventListener('resize',calc); })(); 1234567891011 根据UI设计稿,将px转换成rem,可用cssrem插件,写px时,其会自动提示转rem
(5)rem适配方案
rem和less、媒体查询配合:计算不同屏幕的媒体查询
less详解
less作为一门CSS扩展语言,也就是说CSS预处理器。(Leaner Style Sheets)简称less,它只不过是为css新增这些的功能,比如说:变量、函数、作用域等等。它的优点是:更具有维护性、扩展性等,可以降低了维护的成本,根据按这样的话,那么less可以让我们写更少的代码做更多的事情。
插件适配
根据html font-size值而定
插件来进行html的font-size的值的改变。
适应插件 flexible.js 进行适配
flexible.js文件内容:将屏幕划分为10等份,省去写不同屏幕的媒体查询
// 首先是一个立即执行函数,执行时传入的参数是window和document (function flexible (window, document) { var docEl = document.documentElement // 返回文档的root元素 var dpr = window.devicePixelRatio || 1 // 获取设备的dpr,即当前设置下物理像素与虚拟像素的比值 // 调整body标签的fontSize,fontSize = (12 * dpr) + 'px' // 设置默认字体大小,默认的字体大小继承自body function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 // 设置root元素的fontSize = 其clientWidth / 10 + ‘px’ function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // 当页面展示或重新设置大小的时候,触发重新 window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) // 检测0.5px的支持,支持则root元素的class中有hairlines if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647例子:苏宁
(1)响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局,其适用于页面比较简单的网页,不适合复杂的网页,如电商类
响应式设计与自适应设计的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的页面。
(2)响应式布局的原理
响应不同的屏幕尺寸——媒体查询(根据不同的设备加载不同的css)
总结:
浏览器兼容问题
other
(1)移动端性能主要影响因素
移动端的带宽速度较小移动端的设备性能与PC端的差异巨大。移动端的CPU、内存等设备的性能相比于PC端还是有很大限制的页面本身的问题(2)移动端一个页面从开始到呈现完毕需要经历的阶段
(3)移动端性能优化目标
(4)移动端性能优化的手段
web app
相关知识
10大优秀的移动Web应用程序开发框架推荐
从前端到后端——完整的Web开发指南
移动应用开发就业方向和前景
web前端开发爱尚鲜花.rar资源
快速上手web前端开发(超详细教程)
「职位对比」花儿绽放 前端开发工程师怎么样
前端最常用的移动App开发方式及技术栈详解
HTML5开发移动web应用——SAP UI5篇(1)
移动Web实训DAY
千万别学移动应用开发专业?此专业优势劣势优缺点
网址: 前端移动端web开发(一) https://m.huajiangbk.com/newsview849359.html
上一篇: tearwind/GenUI |
下一篇: 33岁前端干了8年,是继续做前端 |