移动web中的常用技术选型

我们在开发移动端网页时,由于手机屏幕尺寸的不同,需要一些适配方案以达到界面自适应的效果,这里记录一下移动web开发的一些基本概念和常用适配方案,先了解一下视口的概念:

一、视口(viewport).

视口是指浏览器显示页面的区域范围,分为布局视口、视觉视口、理想视口.

1.布局视口:指当网页在移动端显示的时候,早期的做法,浏览器默认会把网页完全缩放到屏幕内,用户可以通过手势进行放大浏览,通常界面会缩放的很小,不便于浏览.

如图,20px大小的文本,在布局视口中,显示很小:

2.视觉视口:指浏览器的可视区域,和屏幕的尺寸大小成正比.

3.理想视口:相当于把布局视口的大小设定为移动端屏幕大小,不需要用户手动缩放调整就可以合适的浏览网页.

理想视口需要在head中通过meta标签实现:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

name="viewport"表示视口标签.

width=device-width设置视口宽度和设备屏幕宽度一致.

initial-scale=1.0初始尺寸比例

maxinum-scale=1.0最大尺寸比例

user-scalable=0是否支持用户缩放,1是0否

二、多倍图.

某些移动设备会使用retina视网膜技术,屏幕上的1像素由几个像素压缩而成,所以界面更加清晰.我们在开发的时候就要使用多倍图以适应这种技术,否则我们的图片会变得模糊.常用的有2倍图和3倍图.

三、移动端的技术选型.

大的方向分为两种:

1.分别单独开发pc和移动端界面.

这里指pc端和移动端写两套界面,常用的技术选型有:流式布局(百分比布局),flex弹性布局,less+rem+媒体查询布局,混合布局.

2.使用响应式技术适配移动端.

响应式布局是指网页会随着屏幕尺寸的大小不同而分别做不同的显示处理,常用的技术选型有:媒体查询,bootstarp.

这里推荐一个移动端使用的css初始化文件:

http://necolas.github.io/normalize.css/

移动web中的常用技术选型相关推荐

互联网反欺诈体系中的常用技术和数据类型
互联网反欺诈常用的技术主要包括数据采集.特征工程.决策引擎.数据分析等几个类别: 数据采集: 主要应用于从客户端或网络获取客户相关数据的技术方法.值得强调的是,数据采集技术的使用,应当严格遵循法律法规 ...
Java开发中Websocket的技术选型参考
1. 前言 Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据 ...
项目中怎样做技术选型
引出四个维度工作快十五年了,从十年前开始经常会有新项目,需要从头开始做方案和设计.做技术选型很少成为我的难题.不是因为这方面我多有方法,而通常是很少有选择.在做技术选型的场景下基本有以下四个维度: ...
响应式网页设计_响应式网页设计中的常用技术
响应式网页设计在先前的文章中,我讨论了为什么Web准备就绪以进行响应式设计 ,以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕(包括PC,电话) 为用户提供上下文相关的体验.和控制 ...
Java Web中的jsp技术
在动态网页开发中,经常需要动态生成html内容,如果使用servlet来实现html页面数据的改变会导致程序十分臃肿.为了克服这些缺点,Oracle(Sun)公司推出了jsp技术. JSP全名是Jav ...
java web中jsp常用标签
在jsp页面开发过程中,经常需要使用JSTL(Java Server Pages Standard Tag Library)标签开开发页面,是看起来更加的规整舒服. JSTL主要提供了5大类标签库:1 ...
java web 有哪些标签库_java web中jsp常用标签
在jsp页面开发过程中,经常需要使用JSTL(Java Server Pages Standard Tag Library)标签开开发页面,是看起来更加的规整舒服. JSTL主要提供了5大类标签库:1 ...
javaweb开发后端常用技术_Java Web开发后端常用技术汇总
技术名称及官网Spring Framework Spring容器 http://projects.spring.io/spring-framework/SpringMVC Spring MVC框架 h ...
微服务架构下该如何技术选型呢？
点击上方"程序猿技术大咖",关注并选择"设为星标" 回复"加群"获取入群讨论资格! 一.前言为了实现基于微服务开发的产品,或者说为了将单体 ...

移动web中的常用技术选型

移动web中的常用技术选型相关推荐

最新文章

热门文章