摘要:
1.组成 ECMAScript:javascript语法 DOM:页面文件对象模型 BOM:浏览器对象模型 1.ECMAScript ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript, 阅读全文
摘要:
1.响应式开发 1.1响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备划分尺寸区间 超小屏幕(手机) < 768px 小屏设备( 平板) 768px ~ 992px 中等屏幕(桌面显示器) 992px ~ 1200px 宽屏设备(大桌面显示器) 阅读全文
摘要:
1.rem基础 rem单位 rem (root em)是一个相对单位,类似于em , em是父元素字体大小。. 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素( html )设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。 html 阅读全文
摘要:
flex弹性布局 1.传统布局与flex布局 传统布局 兼容性好布局繁琐 局限性,不能再移动端很好的布局 局限性,不能再移动端很好的布局 flex弹性布局 操作方便,布局极为简单,移动端应用很广泛PC端浏览器支持情况较差 IE11或更低版本,不支持或仅部分支持 建议∶ 如果是PC端页面布局,我们还是 阅读全文
摘要:
流式布局(百分比布局) 流式布局,就是百分比布局,也称非固定像素布局。 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式。 max-width最大宽度( max-height最大高度) min-width 阅读全文
摘要:
6.移动端常见布局 移动端技术选型 移动端布局和以前我们学习的PC端有所区别: 单独制作移动端页面(主流) 流式布局(百分比布局) flex弹性布局(强烈推荐) less+rem+媒体查询布局 混合布局 响应式页面兼容移动端(其次) 媒体查询 bootstarp 阅读全文
摘要:
5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题。 我们可以放心使用H5标签和CSS3样式。 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可 5.2 CSS初始化normalize.css 移动端CSS初始化推荐使用 阅读全文
摘要:
4. 移动端开发选择 4.1 移动端主流方案 1.单独制作移动端页面(主流) 京东商城手机版 淘宝触屏版 苏宁易购手机版 … 2.响应式页面兼容移动端(其次) 三星手机官网 4.2 单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开, 阅读全文
摘要:
3. 二倍图 3.1 物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334 我们开发时候的1px不是一定等于1个物理像素的 PC端页面,1个px等于1个物理像素的,但是移动端就不尽相同 一个px的能显示的物理像素 阅读全文
摘要:
2. 视口 视口( viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口 2.1布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。 iOS,Android基本都将这个视口分辨率设置 阅读全文