本文介绍如何优化移动端网页，包括清除点击高亮效果、调整盒子模型、移除input默认样式、设置最小宽度和最大宽度以及使用结构伪类选择器。
1.点击高亮效果：在移动端浏览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。
- css代码
-webkit-tap-highlight-color:transparent; /*清除点击高亮效果*/
如果是写了某一个颜色的话就是改变点击高亮的颜色
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>点击高亮效果</title>
<style>
a{
width:
200px;
height:
200px;
display:
block;
}
</style>
</head>
<body>
<a
href="#"></a>
</body>
</html>
2.盒子模型：通过css3的新属性box-sizing我们能够让盒子有限顾及自己的尺寸而不是内容,避免出现多余的滚动条
- css代码
/*设置宽度以边框开始计算*/
-webkit-box-sizing: border-box;/*webkit内核兼容性写法*/
box-sizing: border-box;
（1）box-sizing：content-box —— 保证内容的大小不变
box-sizing：border-box —— 保证盒子的大小不变，但是内容的大小可能会变（移动端一般都是设置border-box）
3.input默认样式清除：在移动设备的浏览器中input标签一般会有默认的样式,通过border=none,outline=none无法去除,比如立体效果,3d效果等等,我们需要添加下列样式
- css代码
/*在移动端清除浏览器默认样式*/
-webkit-appearance: none;
（1）扁平化——border：0；
---------> 
4.最小宽度和最大宽度：考虑到移动设备在大尺寸的的屏幕不会过度缩放 失去清晰度,在小尺寸的屏幕中不会出现布局错乱的问题
- css代码
- 注 下列代码取值不是固定的,根据实际情况需要进行调整
max-width: 640px; /*在行业当中的移动端的设计图一般使用的是640px*/
min-width: 300px; /*在移动设备当中现在最小的尺寸320px*/
（1）max-width：是为了不让用户无止境的放大
（2）min-width：为了防止在超小屏幕上显示错乱
5.结构伪类选择器：nth-child()如果有多个不同兄弟节点获取的时候,索引需要特殊计算,我们可以限定在某一个类型上,语法如下
- E:first-of-type匹配同类型中的第一个元素E。
- E:last-of-type匹配同类型中的最后一个元素E。
- E:nth-of-type(n) 匹配同类型中的第n个元素E。
扫一扫
3689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
