1.移动端开发选择

1.1 移动端主流方案

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

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

1.2单独移动端页面（主流）

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

1.3响应式兼容PC移动端

通过判断屏幕宽度来改变样式，以适应不同终端。如：三星官网

缺点：制作麻烦，需要花大量精力去调兼容性问题

2.移动端技术解决方案

2.1移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题

可以放心使用H5标签和CSS3样式

浏览器的私有前缀只需要考虑添加webkit即可

2.2CSS初始化 normalize.css

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

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

2.3CSS3盒子模型 box-sizing

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

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

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 有了box-sizing: border-box;这句话，就让盒子变成了CSS3盒子模型 *//* box-sizing: content-box; 加这句话就是传统盒子  */box-sizing: border-box;width: 200px;height: 200px;background-color: #16ccec;padding: 10px;}</style>
</head><body><div></div>
</body>

怎么选择：

移动端可以全部用css3盒子模型

PC端如果需要完全兼容，我们就用传统模式，如果不考虑兼容性，就选择css3盒子模型

2.4特殊样式

3.移动端常见布局

移动端技术选型

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

流式布局（百分比布局）

参考某东移动端首页

flex弹性布局（推荐）
参考携某移动端首页

less+rem+媒体查询布局
参考某宁移动端首页

混合布局

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

媒体查询

bootstarp
参考某里百秀移动端首页

3.1流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不收固定像素的限制，内容向两侧填充。

流逝布局方式是移动web开发使用的比较常见的布局方式

设置最大宽度max-width和最小宽度min-width

移动端web开发--开发选择、技术解决方案、常见布局相关推荐

移动端web页面开发
移动端页面开发资源总结 2015.10.10 10:56 16453浏览字号工作了有一段时间,基本上都在搞移动端的前端开发,工作的过程中遇到过很多问题,bug的解决方案,记录下来,以便后用!!!内 ...
移动端web界面开发
根据2017年大公司的市场分析报告,移动端用户上网人数和上网时间已经突飞猛进,相信在5G的环境中,更多人会选择便捷的移动端进行浏览网页获取信息.移动端界面开发也更加重要. 移动端网页前端开发和传统PC ...
如何在 2022 年为 Web 应用程序选择技术堆栈
文章目录什么是技术堆栈? 为 Web 开发选择技术堆栈时要考虑的事项选择熟悉的技术跟随趋势考虑项目的细节确保高安全级别记住你的最后期限选择前端技术栈框架编程语言选择后端技术栈编程 ...
SAP 基于VUE的BSP OO单页移动端Web App开发
前言之前的一篇文章,通过传统的Page with Flow Logic形式去实现了基于Vue的One Page Application.这种做法其实存在一些设计上的问题,前端页面交互层还好说,但后端 ...
从零开始学习移动端Web开发
背景近年来,随着智能手机的普及,移动端开发受到了异常的关注.从传统的安卓.IOS原生手机系统应用开发,转向了移动端Web开发或者是混合开发,既然有需求,那就让我们一起来学习移动端Web开发吧.本文旨 ...
移动端--web开发
最近看到群里对关于移动端 web开发很是感兴趣,决定写一个关于移动端的web开发概念或框架(宝庆对此很是纠结).也是因为自己一直从事pc 浏览器 web一直对移动端的不是很重视,所以趁此机会也 ...
前端移动端web开发（一）
一.前端开发 1.前端开发分类: PC端开发:页面主要运行在PC端浏览器中移动端开发:页面主要运行在手机上移动web开发在移动端表现良好的页面,如新浪网混合式开发(Hybrid App) 也叫 ...
成都web前端开发工程师
Web前端工程师的走红,可以说是意料之外情理之中,近几年来大家对于前端开发这一职位的褒奖不绝如缕,但是16年之后的前端开发招聘市场逐渐回归理性,前端进入了大浪淘沙的"换血"时代,想 ...
现在还能转行学web前端开发吗？
2019还能转行学web前端开发吗?这是很多人在网络上搜索的问题.及其原因,还是因为目前网络上充斥着前端饱和的说法,这让不少人怀疑还能不能转行web前端,目前程序员行业前景很好,而web前端的前景也不 ...

移动端web开发--开发选择、技术解决方案、常见布局

1.移动端开发选择

1.1 移动端主流方案

1.2单独移动端页面（主流）

1.3响应式兼容PC移动端

2.移动端技术解决方案

2.1移动端浏览器

2.2CSS初始化 normalize.css

2.3CSS3盒子模型 box-sizing

2.4特殊样式

3.移动端常见布局

3.1流式布局（百分比布局）

移动端web开发--开发选择、技术解决方案、常见布局相关推荐

最新文章

热门文章