手机端网页制作–小知识点总结(随时更新)

1.对于点击/触摸事件,习惯于用click作为触发这两个事件的方法,但是有一点要注意:电脑上浏览器开启手机模式进行测试的时候,是可以正常触发的。在手机上测试时,click事件没有反应。这个有一个很简单的解决方法,在按钮的css中加入cursor属性就可以了。主要的原因是click事件在手机端触发是需要根据鼠标指针选择元素的,手机和PC对于鼠标/手势指针的默认值还是有不一样的地方的,这个要注意一下。还有一点就是使用手机版的方法touch方法,但是这个有一些兼容性问题。对于目前的我来说我更倾向于用添加css的方法。

2.手机端网页有很明确的结构元素,比如header,section,footer。这个把页面分为了头部,主体,底部三个部分。样式也是比较方便添加和调整的。写的时候尽量用这三个来分块。(目前我就遇到这么点问题,以后再补充 ~(≧▽≦)/~啦啦啦)

3. 遇到一个比较奇葩的情况,页面布局。当body,父元素都没有高度的时候,怎么做到让body内部的div相对于其父元素垂直水平居中。一般都是父级元素有高度,position:relative。然后子div的position:absolute,top:50%,width:;(必须有宽度的),margin:0 auto就差不多可以了的。但是这次就碰到了父级元素没有高度,或者高度是100%;这种不固定的。这个时候,就要做另外一种处理了:首先对父元素:position: absolute;width: 100%;height: 100%;float: left;top: 0。对于子元素:position: absolute;top:50%;width: 100%;margin: 0 auto;transform:translate(0, -50%);-webkit-transform:translate(0, -50%)。这里有用到transform属性。其中的值-50%是与绝对定位中的值相反的。这个一定要注意啦~然后在解决的过程中看到了一篇比较好的针对垂直水平居中做了分类的文章,链接在此CSS制作水平垂直居中对齐。这个上面方法更多,还分析了优缺点。很棒!

4.要注意一下每一个模块的显示层级,这个在手机端,PC端的网页上都很重要。这个问题不太容易发现,因为不会有报错。所以在用到position定位的地方都检查一下z-index的值和所属元素的层级关系。今天做页面的时候就出现了这个问题,结果我还找了很久,也是心累啊

5.手机和PC对于像素的计算是不一样的。PC的1px在手机上的显示就会不一样,那么怎么在手机端显示不足1px的线条呢?最近在工作中遇到了这个问题,找到了一种解决方法。利用伪类:after。对于想要做处理的元素添加这样的一个样式:
类名或id:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 200%;
height: 1px;
background-color: lightgray;
transform: scale(0.5);
-webkit-transform: scale(0.5);
transform-origin: left bottom;
-webkit-transform-origin: left bottom;
}要注意该元素的position的定义。
这个时候,在手机上就能定义一些比较小像素值的线条啦~~~
6.手机端会有一个横屏的问题,在页面动态适应的时候要注意这个手机端功能的检查,在计算屏幕可视高度时一定要注意获取的高度是哪一个高度,是输入法顶部到页面顶部的高度,还是输入法触发之前的可视高度。

» 本文来自:前端开发者 » 《手机端网页制作–小知识点总结(随时更新)》
» 本文链接地址:https://www.rokub.com/8842.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!