移动端开发

2022.3.5 学习笔记

目录

四、移动端开发方案

五、 移动端技术解决方案

六、移动端常见布局

移动端开发之流式布局：

一、基础

二、制作京东移动端首页案例

---

四、移动端开发方案

①单独制作移动端页面 （主流） 京东商城手机版 淘宝触屏版 苏宁易购手机版

通常情况下， 网址域名前面加 m(mobile) 可以打开移动端。 通过判断设备， 如果是移动设备打开， 则跳到移动端页面。

②响应式页面兼容移动端 （其次） 三星手机官网 apple手机官网

通过判断屏幕宽度来改变样式， 以适应不同终端。但制作麻烦， 需要花很大精力去调兼容性问题。

五、 移动端技术解决方案

1. 移动端浏览器兼容问题

移动端浏览器基本以 webkit 内核为主， 因此我们只需考虑webkit兼容性问题。 我们可以放心使用 H5 标签和 CSS3 样式，同时针对浏览器的私有前缀只需考虑添加 webkit 即可。

 2.移动端CSS初始化问题

移动端 CSS 初始化推荐使用 normalize.css。

Normalize.css：保护了有价值的默认值，修复了浏览器的bug ，是模块化的，拥有详细的文档。官网地址： http://necolas.github.io/normalize.css/ 5.2 CSS初始化

3. 移动端CSS3 盒子模型问题

①传统模式宽度计算： 盒子的宽度 = CSS中设置的width + border + padding

/* 传统盒子模型 */ box-sizing: content-box;

②CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width ，里面包含了 border 和 padding，也就是说， 我们的CSS3中的盒子模型中padding 和 border 不会撑大盒子

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

移动端可以全部使用CSS3 盒子模型；PC端如果完全需要兼容就用传统模式， 如果不考虑兼容性就选择 CSS3 盒子模型。

4.移动端中一些特殊样式

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

/* 点击高亮我们需要清除清除，设置为transparent透明 */ 
-webkit-tap-highlight-color: transparent; 

/* 在移动端浏览器默认的外观在 iOS 上加上这个属性才能给按钮和输入框自定义样式 */ 
-webkit-appearance: none; 

/* 禁用长按图片、标签时的弹出菜单 */ 
img,a { -webkit-touch-callout: none; }

六、移动端常见布局

1 . 单独制作移动端页面 （主流）

流式布局 （百分比布局）、flex 弹性布局 （强烈推荐）、less+rem+媒体查询布局、混合布局 

2. 响应式页面兼容移动端 （其次）

媒体查询 、bootstarp

移动端开发之流式布局：

一、基础

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

max-width 最大宽度（max-height 最大高度）        min-width 最小宽度 （min-height 最小高度）

 

二、制作京东移动端首页案例

1.我们采取单独制作移动页面方案、布局采取流式布局。

2.搭建相关文件夹结构

3.设置视口标签以及引入初始化样式

4. 常用初始化样式

body { 
    margin: 0 auto; 
    min-width: 320px; 
    max-width: 640px; 
    background: #fff; 
    font-size: 14px; 
    font-family: -apple-system, Helvetica, sans-serif; 
    line-height: 1.5; 
    color: #666; 
}

 5.二倍精灵图做法(注意)

①在PS里面把精灵图等比例缩放为原来的一半(Ctrl+T)。千万不要保存，否则会修改精灵图的大小，我们只是为了测量缩放后的坐标而已。

②测量所需要图片在缩放后精灵图中的坐标x、y。background: url( ) no-repeat x y;

③将代码里面background-size修改为精灵图原来宽度的一半，高度设置为auto。

6. 图片格式

①DPG图片压缩技术

京东自主研发推出 DPG 图片压缩技术， 经测试 该技术， 可直接节省用户近 50% 的浏览流量， 极大的提升了用户的网页打开速度。 能够兼容 jpeg ， 实现全平台、 全部浏览器的兼容支持， 经过内部和外部上万张图片的人眼浏览测试后发现， 压缩后的图片和 webp 的清晰度对比没有差距。

② webp 图片格式

谷歌开发的一种旨在加快图片加载速度的图片格式。 图片压缩体积大约只有 JPEG 的 2/3 ， 并能节省大量的服务器宽带资源和数据空间。