移动端h5开发cssx相关内容

资讯中心

移动端h5开发cssx相关内容

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

其它相关配置内容如下:

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) 

 
售前咨询售后服务技术支持