H5移动端页面设计的基础规范

作者：华清远见讲师

随着智能手机、平板电脑等移动终端的发展和普及，普通大众对手机网站的认知度得到了明显的提升。安卓，IOS手机系统的逐步发展也带动了手机页面的发展，跟PC网页相比，手机网站和普通网站有两大不同点：

第一，访问入口不同。与传统的电脑上网相比，手机上网具有便捷、随时随地的特点。

第二，浏览方式不同。由于电脑上的屏幕比手机大很多，普通网站比手机网站拥有更强的展示能力，能在一个网页上占时大量的图片、视频、语音等全方位的信息，但是手机网站由于屏幕尺寸的限制，更多地仅仅是用文字和图片来表现。

介于这两点不同于普通网站的区别，分享一下我的一些移动端网页设计经验与心得。

⒈ 分辨率

这应该是移动端网页最关心的问题了，因为移动设备五花八门，各种分辨率都有。要想在这些设备上都能有良好的浏览体验，得花一番功夫。使用viewport：这已经是移动端网页的必备了，它可以设定页面的宽度，是否允许缩放等等。

一般设置width=device-width，就是设置为设备的屏幕宽度，当然也可以是具体数值。百分比与max(min)-width使用：移动端网页不仅分辨率不一，而且随时可以横竖屏切换，所以百分比宽度设定非常必要，再配合max(min)-width限制最大(小)宽度，能有效的适应各种分辨率。

这里的意思就是在大于640px的屏幕宽度下，使用style1样式，也可以写在样式内部，如：

@media screen and (min-width: 640px){.d1{background:#ccc;}}

2.不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度： width:xxx px;

只能指定百分比宽度： width: xx%或者 width:auto。

3.相对大小的字体

字体也不能使用绝对大小(px)，而只能使用相对大小(em)。

body {font: normal 100% Helvetica, Arial, sans-serif; }

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {font-size: 1.5em;}

然后，h1的大小是默认大小的1.5倍，即24像素(24/16=1.5)。

small { font-size: 0.875em; }

small元素的大小是默认大小的0.875倍，即14像素(14/16=0.875)。

4.流动布局(fluid grid)

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main { float: right; width: 70%; }

.leftBar { float: left; width: 25%; }

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。

另外，绝对定位(position: absolute)的使用，也要非常小心。

4.图片的自适应

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

这只要一行CSS代码：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});

H5移动端页面设计的基础规范相关推荐

H5移动端页面设计心得分享
如今H5页面设计已经得到大家非常多的关注,在实践中我们也已经积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有帮助. ...
【设计】H5移动端页面设计心得分享（附案例解析）
京东设计中心:去年JDC出了不少优秀的武媚娘-不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计, ...
超多案例，强解H5移动端页面设计！-20150228早读课
来源:@京东设计中心作者:@嗡得得去年JDC出了不少优秀的武媚娘-不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好 ...
H5移动端页面设计心得分享(转载)
去年JDC出了不少优秀的武媚娘-不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有 ...
图上上传页面设计_无线端页面设计“三大雷区”
无线视觉规范手机端页面的设计有许多的规范,大到涉及整个页面的排版呈现方式,小到一个icon的尺寸大小,这都关系到视觉页面的美观程度以及用户体验设计.所以应该积极主动去分析深入了解并研究出可行的解决方 ...
如何在H5移动端页面中调起手机拨打电话功能？
文章目录一.如何在H5移动端页面中调起手机拨打电话功能? 二.Vant搭建页面js函数调用弹窗,如何实现对应点击功能? 一.如何在H5移动端页面中调起手机拨打电话功能? <a href=&qu ...
嵌入式Qt实验一（Qt开发环境的安装及服务端页面设计）
文章目录 Qt开发环境的安装服务器端页面设计实现目标创建工程 UI设计端口模块通信记录模块和发送数据模块发送按钮模块连接状态模块整体垂直布局设计窗口标题和加载资源图片成品 Qt开发 ...
【h5移动端页面调起手机sms批量发送短信，兼容ios和android】
移动端h5页面调起手机发送短信功能,实现批量发送生日祝福模板,苹果和安卓的兼容写法不一样. 先判断是ios还是android,拼接的写法不一样 android是sms:188XXXXXXXX,134X ...
最新最全移动端界面设计UI尺寸规范-2018年初版
一.UI尺寸基础知识 1.像素密度-PPI 像素密度是指显示屏幕每英寸的长度上排列的像素点数量,PPI(Pixels per inch)越高代表屏幕显示效果越精细,Retina屏比普通屏清晰很多,就是 ...
用vue开发微信公众号H5移动端页面
第一步:搭建项目结构其中涉及到路由的配置: 我是这样的routes: [{path: '/',name: 'base-home',redirect: '/main',component: '',ch ...

H5移动端页面设计的基础规范

H5移动端页面设计的基础规范相关推荐

最新文章

热门文章