移动WEB开发

了解移动端基础

浏览器
移动端的浏览器大多都是基于webkit修改的内核,国内尚无自主研发的内核。所以,兼容移动端主流浏览器,处理webkit内核浏览器即可。

手机屏幕现状
移动端设备屏幕尺寸非常多,碎片化严重。
Android设备有多种分辨率:400 * 800,480 * 854,540 * 960,720 * 1290,1080 * 1920等。
近年来iPhone的碎片化也加剧了,640 * 960,640 * 1136,750 * 1334,1242 * 2208等。

移动端调试方法

  • Chrome DevTools的模拟手机调试。
  • 搭建本地web服务器,通过手机访问。
  • 使用外网服务器,直接ip或域名访问。
视口

视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

布局视口 layout viewport

  • 一般移动设备的浏览器都默认设置来一个布局视口,用于解决早期的PC端页面在手机上的显示问题。
  • IOS,Android 基本都将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面。

视觉视口 visual viewport

  • 字面意思,它是用户正在看到的网站的区域。 注意:是网站的区域。
  • 我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。

理想视口 ideal viewport

  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定
  • 理想视口,对设备来讲,是最理想的视口尺寸
  • 需要填写meta视口标签通知浏览器操作
  • meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解- 就是设备有多宽,我们布局的视口就多宽。

<meta>视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
视口标签.png

二倍图

物理像素和物理像素比
  • 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了。
  • 我们开发时候的1px不是一定等于1个物理像素的。
  • PC端页面,1个px等于1个物理像素的,但是移动端就不尽相同。
  • 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比。


    物理像素比.png

多倍图

  • 对于一张50 * 50 的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊。
  • 在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题。
  • 通常使用二倍图,因为iPhone 6/7/8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求。
  • 背景图片注意缩放问题。
移动端开发选择
  • 单独制作移动端页面(主流)
  • 响应式页面兼容移动端(其次)
移动端常见问题解决方案

移动端浏览器主要以webkit为主,因此我们只需要考虑webkit兼容性问题。
我们可以放心使用H5和CSS样式。
同时我们浏览器的私有前缀我们只需要考虑添加-webkit-即可。

移动端CSS初始化推荐使用normalize.css
官网:https://necolas.github.io/normalize.css/

特殊样式.png
移动端技术选型

单独制作移动端页面(主流)

  • 流式布局(百分比布局)
  • flex弹性布局(强烈推荐)
  • less + rem +媒体查询布局
  • 混合布局

响应式页面兼容移动端(其次)

  • 媒体选择
  • bootstrap
流式布局(百分比布局)
  • 流式布局,就是百分比布局,也称非固定像素布局
  • 通过将盒子的宽度设置成百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充
  • 流式布局方式是移动web开发使用的比较常见的布局方式

注意
制作过程中,需要定义页面的最大和最小支持宽度

  • max-width最大宽度 (max-height最大高度)
  • min-width最小宽度(min-height最小高度)
flex布局
  • 操作方便,布局极为简单,移动端应用很广泛
  • PC 端浏览器支持情况较差
  • IE 11或更低版本,不支持或仅部分支持

原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

flex布局父项常见属性

  • flex-direction: 设置主轴方向
  • justify-content: 设置主轴上的子元素排列方式
  • flex-wrap: 设置子元素是否换行
  • align-content: 设置侧轴上的子元素的排列方式(多行)
  • align-items: 设置侧轴上的子元素排列方式(单行)
  • flex-flow: 复合属性,相当于同时设置了 flex-direction 和flex-wrap
rem
  • rem -- root em是一个相对单位,类似于em,em是父元素字体大小。
  • 不同的是rem的基准是相对于html标签元素的字体大小
  • 比如,根元素html设置font-size=12px;非根元素设置width:2rem;转化成px就是24px
  • rem的优势:父元素文字大小可能不一致,但是整个页面只有一个html,可以很好的来控制整个页面的元素大小比例。

媒体查询

  • 用@media开头 注意@符号
  • mediatype媒体类型
  • 关键字 and not only
  • media feature 媒体特性 必须有小括号包含
@media mediatype and|not|only (media feature){
            css-code;
        }

max-width min-width都包含等于

less
css弊端

  • css需要书写大量看似没有逻辑的代码,css冗余度是比较高的
  • 不方便维护及扩展,不利于复用
  • css没有很好的计算能力
  • 非前端开发工程师来讲,往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目

less简介和安装

  • Less Leaner Style Sheets 是一门 CSS扩展语言,也成为CSS预处理器。
  • 做为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性
  • 它在CSS的语法基础上,引入来变量,Mixin(混入),运算以及函数等功能,大大简化来CSS的编写,并且降低了CSS的维护成本,就像它的名称

Less是一门CSS预处理语言,它扩展了CSS的动态特性。

安装

npm install -g less

Less变量规则

  • 必须以@开头
  • 不能包含特殊符号
  • 数字不能开头
  • 大小写敏感

Less运算

  • 参与运算的数字,可以一个有单位一个没有,最终单位就是唯一那个单位
  • 参与运算的两个数字,两个都有单位取第一个的
  • less的运算符左右必须加空格

Less实际开发适配方案1:rem+媒体查询+less技术

响应式页面兼容移动端

  • 媒体查询
  • Bootstrap

Bootstrap
优点

  • 标准化html + css 编码规范
  • 提供了一套简洁、直观的组建
  • 有生态圈,不断更新迭代
  • 让开发更简单,提高效率
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,013评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,205评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,370评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,168评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,153评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,954评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,271评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,916评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,382评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,624评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,209评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2 345

推荐阅读更多精彩内容