移动端h5开发cssx相关内容

来自：发布时间：2017/1/20 14:48:03 浏览次数：

1.移动端开发视窗口的添加

h5端开发下面这段话是必须配置的

其它相关配置内容如下：

1 width viewport 宽度(数值/device-width)

2 height viewport 高度(数值/device-height)

3 initial-scale 初始缩放比例

4 maximum-scale 最大缩放比例

5 minimum-scale 最小缩放比例

6 user-scalable 是否允许用户缩放(yes/no)

2.媒体查询

之前在做移动端开发的时候，为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点html 的font-size 值。这样可以解决多屏幕适配的问题。

3.标签内容语义化

4.为自己的页面设置最大宽度和最小宽度

如果我们使用的是rem 单位，使用 js 动态计算font-size 值的话，我们可以无限适配最大和最小的终端屏幕。但是当用户的屏幕超过一定的尺寸以后还继续显示h5页面的话对用户会很不友好

5.去掉 a，input 在移动端浏览器中的默认样式

1.禁止 a 标签背景

2.禁止长按 a，img 标签长按出现菜单栏

3.流畅滚动

8.box-sizing 的使用

box-sizing 属性用来改变默认的 CSS 盒模型对元素高宽的计算方式。这个属性用于模拟那些非正确支持标准盒模型的浏览器的表现

9.水平垂直居中的问题

绝对定位在布局中可以很方边的解决很多问题，但是大多数时候都不去使用绝对定位，而是使用浮动等方法。而当需要 DOM 元素脱离当前文档流的时候才使用绝对定位。如：弹层，悬浮层等

10.使用 vertical-align 调整图标垂直居中

属性:

1 baseline：将支持valign特性的对象的内容与父级元素基线对齐

2 sub：元素基线与父元素的下标基线对齐。

3 super：元素基线与父元素的上标基线对齐。

4 top：元素及其后代的顶端与整行的顶端对齐。

5 text-top：元素顶端与父元素字体的顶端对齐。

6 middle：元素中线与父元素的基线对齐。

7 bottom：元素及其后代的底端与整行的底端对齐。

8 text-bottom：元素底端与父元素字体的底端对齐。

9 percentage：用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。

10 length：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）