横竖屏切换
竖屏不限定宽高、间距，保证横屏看着正常。
-
宽：快速查看整个页面，不会因宽度超过屏幕范围而可以左右拖动。
页面不会因页面超出屏幕范围而左右拖动。不会因图片限制宽度而有空白区域。（使用合理的图片对齐方式） -
高：模块不会因为限定的高度而又内容超出模块范围。
-
间距：页面中没有太多因屏幕变宽而增加的无效空白区域 。
-
浮动：不能出现因浮动导致的错版。
网站主题色
-
网站采用单色系配色，部分区域可根据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; //与高度保持一致
}
