w3ctech

[经验]移动网页适配的界面规范

横竖屏切换

竖屏不限定宽高、间距,保证横屏看着正常。

  • 宽:快速查看整个页面,不会因宽度超过屏幕范围而可以左右拖动。

    1. 页面不会因页面超出屏幕范围而左右拖动。

    2. 不会因图片限制宽度而有空白区域。(使用合理的图片对齐方式)

  • 高:模块不会因为限定的高度而又内容超出模块范围。

  • 间距:页面中没有太多因屏幕变宽而增加的无效空白区域 。

  • 浮动:不能出现因浮动导致的错版。

网站主题色

  • 网站采用单色系配色,部分区域可根据pc站采用多色。

  • 标题左侧和列表单条信息左侧,可用圆形点、方形点,其颜色与pc站上的设计保持一致。

  • 不同内容颜色要有区分度。如标题、内容、时间、作者等

标题使用黑色(#000, #333),内容、时间采用灰色(#666, #999),作者使用链接色(#00f)

对齐方式

  • 按模块规律使用统一对齐方式,类似功能模块的

  • 横竖屏切换,按钮、图片使用一致的对齐方式。

  • 列表模块一般居左,视情况在其右侧添加“more”链接,标题和more链接分别使用有对比的颜色。

列表模块下方more链接,一般居中。

  • 垂直居中基于表格布局实现。

间距

  • 各模块间使用统一的间距,可采用10px、20px,达到视觉上的基本统一。

有时候line-height会产生一定的间距,如3px,应该在模块间中减掉。

  • 页面采用统一的左右间距,可采用5px、10px,不推荐使用8px(计算麻烦)。(图片轮播、标题栏等视情况可顶头)。

  • 图片列表采用5px~10px,将图片和文字隔开,并将图片和文字的上下侧对齐。

间隔线

  • 重复性或类似内容中间区分度不高的使用间隔线条进行区分。常见形式:新闻列表、图片混排列表

  • 列表间隔线常用灰色,标题下侧间隔下可用灰色或网站主题(多为青蓝色)

清除浮动

  • 使用浮动进行布局的时候,务必要清除浮动,不能用设置高度来代替。

  • 使用overflow:hidden清除浮动时,在安卓、苹果手机上检查保证没有被遮住的情况。

  • 浮动换行,使用float做左边固定右边自适应的效果时,保证在UC、QQ浏览器上不出现换行的情况。

列表画廊

  • 新闻标题、图片画廊多余6个的,都可以考虑隐藏。

  • 列表类竖屏1列,横屏可适当显示2列

  • 画廊类竖屏2列,横屏可适当显示3~4列

文字截取

  • 列表单条一般做单行截取,可根据pc站的显示效果不做截取。

列表单条中链接与时间混排的,保证在UC、QQ浏览器上不遮挡、不错版截取

  • 标题描述列表时,标题可采用不截取或单行截取,描述可采用两行或三行截取。

  • 图文混排时,标题可采用不截取或单行截取,描述可采用两行或三行截取,要保证图片下侧与描述下侧对齐。保证在UC、QQ浏览器上不出现遮挡的情况。

js交互

  • 确保js交互方式正常。

  • 确保可点击范围,保证32~44px的点击范围。

  • 删除百度分享、“Bshare”等第三方模块。

表单区域

  • 搜索区域内的输入框和搜索按钮需占满整个屏幕,即横竖屏切换时显示效果一致。

  • 布局类的表单样式在苹果、安卓手机显示效果要一致。

  • 搜索文本框需要有明显的文字提示,不出现大的空白。

  • 注册登录区域的表单,需要有label性质的文字,若没有,就需要在文本输入框中加上placeholder的提示性文字。

弹出窗口

采用左右对齐、对齐的方式,

可用固定宽度,如300px;可用不固定宽,一般距离屏幕左右两侧10px、15px

在手机上保证进行文字输入,弹出窗口不受影响。

页码

可点击区域,间距

大项目可单独制作 上一页 1 / 32 下一页 经典的页面控件

边框

input { outline: none; //清除input外边框 -webkit-appearance: none; // 清除iPhone上默认的样式,如圆角(待确认) }

/* 保证安卓手机和苹果手机样式一致 */
.inputtext{

    display: block;  //变成块元素消除默认的上下外边距

    width: 100%; //特定的时候用

    height: 30px; //严格要求的时候用

    //需要设置  `边距、边框、背景、圆角、行高`

    padding: 0;

    background: #e1e1e1;

    border-radius: 5px 0 0 5px; //

    border: none;

    line-height: 30px; //与高度保持一致

 }
w3ctech微信

扫码关注w3ctech微信公众号

共收到1条回复

  • 出了input type=“file” 不能正常之外,其他input 苹果type类型可以

    回复此楼