移动端技术选型

一、移动端主流方案

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

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

2、响应式页面兼容移动端（其次）、例如：三星手机官网

通过判断屏幕宽度来改变样式，以适应不同的终端
缺点：制作麻烦，需要花很大精力去调兼容性问题，而且后期维护成本高

二、移动端技术解决方案

1、移动端浏览器

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

2、CSS初始化，normalize.css

移动端css初始化样式推荐使用 normalize.css
保护了有价值的默认值，修复了浏览器的bug，是模块化的，拥有详细的文档
官网：http://necolas.github.io/normalize.css

3、CSS3盒子模型（box-sizing:border-box;）

移动端可以全部使用CSS3盒子模型（不考虑兼容性）
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型
移动端兼容性写法-webkit-box-sizing:border-box;

4、移动端特殊样式

点击高亮背景需要我们清楚，设置为transparent完成透明
- 链接等点击的时候会有一个默认的背景
- -webkit-tap-highlight-color:transparent;
在移动端浏览器上默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
- -webkit-appearence:none;
在移动端上禁止长按页面时弹出菜单
- img ,a {-webkit-touch-callout：none;}

移动端技术选型

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

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

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

媒体查询
bootstrap

一、流式布局（百分比布局）

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

min-width 最小宽度（min-width 最小高度）

//为了保护盒子在合理的范围内进行压缩，所以设置了最大宽度和最小宽度
//屏幕有多宽，盒子就有多宽，最大980px 最小320px;
width:100%;
max-width:980px;
min-width:320px;
表示宽度在320px-980px之间可自由伸缩

12-移动端技术选型相关推荐

跨端架构的技术选型 2022
1. 跨端架构的意义在<The Pragmatic Programmer>(中文翻译为<程序员修炼之道>)中,作者提了一个 DRY(Don't Repeat Yourself ...
简说创业公司的技术选型，从BearyChat的开发说起
简说创业公司的技术选型,从BearyChat的开发说起发表于2015-07-28 16:25| 3491次阅读| 来源CSDN| 5 条评论| 作者蒲婧 CTOCTO俱乐部创业工具管理实践CTO讲堂 ...
weblogic jms消息删除_消息队列与消息中间件概述：消息中间件核心概念与技术选型...
什么是消息? "消息"是在两台计算机间传送的数据单位. 消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象. 什么是队列? 队列(Queue)队列是一种先进先出 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
[推荐] 一个 Node.js 技术选型案例：使用 CARMEN 作为卡牌手游技术栈
作者 @超人张宝胜 ,原文地址:https://zhuanlan.zhihu.com/p/103724412,如需转载请联系作者授权. 前言本文介绍了在资金.人员.时间上全面告急.云服务提供商不确定 ...
技术选型-RabbitMQ 和 Kafka
技术选型-RabbitMQ 和 Kafka 转载声明: 本文系转载自以下两篇文章: RabbitMQ 和 Kafka 到底怎么选? 公众号: 菜鸟架构作者: haolujun 消息中间件选型分析-- ...
58同城首页腰部动态化技术选型(布局动态化)
1. 行业情况 1.1 基本概念介绍 1.1.1 Web混合 Web 前端和客户端的混合开发.使用 WebView 进行页面渲染.逻辑执行:依赖客户端的能力需要通过 JSBridge(通信桥) 的方式 ...
新东方APP技术架构演进， C端技术经验分享
新东方APP技术架构演进, C端技术经验分享作者:张建鑫, 曾任IBM高级软件架构师, 滴滴高级技术专家, 现任新东方集团高级技术总监古代东西方的思想家都产生过一个终极的追问,世界的本元到底是什么 ...
架构设计：系统存储（20）——图片服务器：需求和技术选型（2）
(接上文<架构设计:系统存储(19)--图片服务器:需求和技术选型(1)>) 3-5.其它技术选型说明 3-5-1.关于关系型数据库关于持久化存储的数据库技术要注意一点,实际上它并不是图 ...

12-移动端技术选型

移动端技术选型

移动端技术选型

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

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

一、流式布局（百分比布局）

12-移动端技术选型相关推荐

最新文章

热门文章