四、移动端开发选择

五、移动端技术解决方案

六、常见布局

七、流式布局

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

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

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

一些技术细节：
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设计尺寸

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：
，HTTP，浏览器，算法等等**

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-xFkjLVm3-1714735233584)]

前端视频资料：