module4-01-移动开发基础

移动开发基础

一、了解移动基础

1.1 移动web开发基础

1.1.1 浏览器现状
  • 国内得UC和QQ, 百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发得内核,就像国内得手机操作系统都是基于ANDROID修改开发得一样

  • 兼容移动端主流浏览器,处理Webkit内核浏览器即可

1.1.2 手机屏幕现状
  • 屏幕尺寸非常多,碎片化严重

  • 前端开发不用关心分辨率,常用尺寸单位是px

1.1.3 常见移动端屏幕尺寸

  • 一些单位: dp,dpi,pt,ppi

1.1.4 总结
  • 移动端浏览器我们主要对webkit内核进行兼容

  • 现在的移动端开发主要正对手机端进行开发

  • 移动端碎片化比较严重, 分辨率和屏幕尺寸大小不一

  • 学会用谷歌浏览器模拟手机页面进行调试(F12)

二、视口

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

2.1 布局视口

  • 一般移动设备的浏览器都默认设置了一个布局视口,用于结局早期的PC端页面在手机上显示的问题。

  • IOS,Android基本都会将这个视口分辨率设为980px,所以PC上的网页大多都能在手机商城县,只不过元素看上去很小,需要通过手动缩放页面

  • 仅仅视觉效果被压缩, 但是实际没有压缩

2.2 视觉视口

  • 字面意思,它是用户正在看到的网站的区域

  • 我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口扔保持原来的宽度

2.3 理想视口

  • 为了使网站在移动端有最理想的浏览器和阅读宽度而设定

  • 手动添加<meta>标签使布局视口的宽度理想视口(布局视口)一致,简单理解就是设备有多宽, 布局的视口就有多宽

2.3.1 <meta>视口标签
  • <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0>

属性解释说明
width 宽度设置是viewport宽度, 可以设置device-width特殊值
initial-scale 初始缩放比, 大于0的数字
maximum-scale 最大缩放比,大于0的数字
minimum-scale 最小缩放比,大于0的数字
user-scalable 用户视口可以缩放,yes或no(1或0)
2.3.2 总结
  • 视口就是浏览器显示页面内容的屏幕区域

  • 视口分为布局视口,视觉视口和理想视口

  • 移动端布局想要的是理想视口,就是手机有多宽,布局视口就有多宽

  • 想要理想视口,需要添加meta属性

三、物理像素和物理像素比

  • 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6/7/8 是 750*1334

    • 而实际占满总宽只需要375个像素

  • 我们开发的1px不一定是一个物理像素

  • PC端页面,1个px等于一个物理像素,移动端不一定相等

  • 一个px能显示的物理像素点的个数,称为物理像素比屏幕像素比

  • Retina(视网膜屏幕)是一种显示技术, 可以将更多的物理像素点压缩至一块屏幕里, 从而得到更高的分辨率, 并提高屏幕显示的细腻程度

四、二倍图

4.1 多倍图

  • 对于一张50px*50px的图片在Retina屏打开,按照如iphone6/7/8那样的物理像素比会放大2倍,使照片模糊

  • 在标准的viewport中,通常使用多倍图来解决在高清设备中的模糊问题

  • 通常使用二倍图,甚至存在三、四倍图的情况

4.2 调整方法

  • 假设图片都是100px的两倍图

(1)插入图片

{
   width: 50px;
   height: 50px;
}

(2)背景图片

{
   background-size: 50px 50px;
}

4.3 要图

(1)启动图

  • 是设计师根据手机分辨率开发的

  • 需要在这里也切图

(2)开发尺寸

  • 是实际写进代码里面,进行切图量尺寸用的

(3)多倍图切图

  • @3X 3倍图

  • @2X 2倍图

  • @1X 1倍图原图

4.4 移动开发选择

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

  • 哦判断设备,跳转到移动端页面,域名有m.

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

  • 三星手机官网

  • 优点:

    • 自适应, 公用一套网站

  • 缺点:

    • 制造麻烦, 需要花费精力去调兼容性问题

4.5 移动端常见问题的解决方法

  • 回顾PC端的reset.css清除默认样式

  • 但对于移动端使用normalize.css设置同意默认样式更好

(1)CSS初始化 normalize.css

  • 移动端CSS初始化推荐使用normalize.css。是可以定制的css文件,它让不同浏览器在渲染网页元素的时候形式更统一,是一种现代的,为HTML5准备的优质替代方案

  • 优点

    • 保护有价值的默认值

    • 修复了浏览器的bug,结局了浏览器的不一致的默认样式

    • 模块化的, 提高了易用性

  • 官网地址: http://necolas.github.io/normalize.css/

(2)CSS3 盒子模型 box-sizing

  • 移动端推荐使用border-box

(3)特殊样式

/* CSS3盒子模型 */
/* box-sizing: border-box;
-webkit-box-sizing: border-box; */

/* 点击高亮我们需要清除, 设置为transparent */
* {
 -webkit-tap-highlight-color: transparent
}
/* 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 */
input {
 -webkit-appearance: none;
}
/* 禁用长按页面时的弹出菜单 */
img, a {
 -webkit-touch-callout: none;
}

4.6 移动端技术选型

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

  • 流式布局(百分比布局)

  • flex弹性布局(强烈推荐)

  • less+rem+媒体查询布局

  • 混合布局

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

  • 媒体查询

  • bootstrap

posted @ 2020-11-30 19:52  叻仔猪  阅读(69)  评论(0编辑  收藏  举报