移动web开发

移动web开发

一、基础

二、视口

我们移动端布局想要的是：理想视口，就是手机屏幕的宽度，布局视口也是这个宽度
想要理想视口，我们需要给移动页面添加meta视口标签

meta视口标签

三、二倍图

物理像素和物理像素比


多倍图：

举个例子：当我们需要一个5050像素（css像素）的图片，在iPhone8中会放大为100100
因此会变模糊，我们可以准备一个100100（css像素）的图片（二倍图），然后手动缩小为5050，在iPhone8中再被放大为100*100，这时候就不会模糊。

background-size：x y；可以用来设置背景图的大小

四、移动端开发选择

五、移动端技术解决方案

六、常见布局

七、流式布局

八、京东移动端首页制作（流式布局）

技术选型：单独制作移动端页面，采用流式布局

注意前期的创建文件夹还有引入视口标签和初始化样式

一些技术细节：
1.二倍精灵图缩放：
注意要缩放之后再量相应的位置坐标（firework）
并且使用background-size来把精灵图缩小一半

2.dpg和webp图片格式

效果：

静态网站：京东移动端首页

九、flex布局（专门有一篇）

Flex布局

十、携程移动端首页制作（flex布局）

技术选型：单独制作移动端页面，flex布局

1.flex布局的应用

2.背景颜色渐变

效果：


静态网站：携程移动端首页

十一、rem布局（专门有一篇）

rem布局

十二、苏宁移动端首页制作（rem布局）

法一：
技术选型：单独制作移动页面方案，采用rem适配布局（less + rem + 媒体查询）
设计图：采用750px设计尺寸

1.设置公共common.less文件

2.在样式文件中导入其他样式文件(index.css中引入common.css)

@import "common";

注意与link（在html页面中导入css文件）的区别

效果：

静态网站：苏宁移动端首页1

法二：
技术选型：单独制作移动端页面，采用rem适配布局（flexible.js + rem）
设计图：采用750px设计尺寸 分成10份

1.可以使用插件cssrem来自动转换px为rem而不再使用less
注意此时的rem是相对于cssroot的字体大小 也就是16
而我们采用750px作为设计稿时，我们的html的字体大小应该是75px，因此我们可以在设置那里修改cssroot的font-size为75px，再进行开发

静态网站：（只做了一个搜索框）苏宁移动端首页2

十三、黑马面面移动布局（混合布局）

技术选型：rem+less+flexible+flex
使用了摹客、swiper插件、图标字体、码云部署发布静态网站

具体细节查看：黑马面面移动页面布局.md文件

效果：

静态网站：黑马面面项目

十四、响应式布局（专门有一篇）

响应式布局

十五、阿里百秀项目（响应式）

技术选型：响应式+bootstrap
设计图：1280px设计尺寸

大屏&中屏


1.字体图标的引入直接写类名即可，相当于加了::before伪元素，因此相应的样式也是在::before中进行修改

2.清除浮动可以直接加类名clearfix就可以了，不用再写别的东西

3.先布局最大的屏幕（大屏），然后再回过头来修改中屏小屏超小屏的布局，常用的方法有：
（1）在html结构当中给样式设定隐藏与显示，能够达到在不同屏幕尺寸下，显示不同的样式结构

（2）利用媒体查询对样式进行修改

效果：
大屏&中屏：

小屏：

超小屏：


静态网站：阿里百秀项目

一些规范问题：
1.属性选择器前面要写空格