一、手机版页面的头部的标签
<head lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>马贝商城</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
1. <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”
http-equiv=“X-UA-Compatible” 是IE8的一个专有属性，是兼容模式的定义。用于指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式以此来解决部分兼容问题，在网页中，其指定的模式的优先权高于服务器中（通过HTTP Header）所指定的模式。该标签必须写在网页中除了title元素和其他meta以外的所有其他元素之前。
Edge模式告诉IE以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。
Chrome=1可以激活Chrome Frame ，如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF则使用最高版本的IE内核来进行渲染。
2. <meta name=“viewport” content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
meta viewport 标签目的是解决移动设备的viewport问题，ppk把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类：
| 分类 | 含义 |
|---|---|
| layout viewport | 宽度大于浏览器可视区域的宽度。可以通过document.documentElement.clientWidth 来获取。 |
| visual viewport | 可视区域的大小。宽度可以通过window.innerWidth 来获取。 |
| ideal viewport | 理想大小，该宽度等于移动设备的屏幕宽度。 |
要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是两者都写上去，这样 initial-scale=1 解决了 iphone、ipad的问题，width=device-width则解决了IE的问题。
width 和 initial-scale=1同时出现，并且不相等，浏览器会取它们两个中较大的那个值。（ps:在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）
在苹果的规范中，meta viewport 有6个content属性值：
| 属性名称 | 属性值 |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"device-width" |
| height | 同width |
| initial-scale | 设置初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，可以带小数 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
总结：
第一、如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。
第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。
3. <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"
解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
4. <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"
让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
二、表单元素中提示文本颜色的设置
1. input 提示文本的颜色
input::-webkit-input-placeholder{
color:#999;
}
input:-moz-placeholder{
color:#999;
}
input:-ms-input-placeholder{
color:#999;
}
2. textarea 提示文本的颜色
textarea::-webkit-input-placeholder{
color:#999;
}
textarea:-moz-placeholder{
color:#999;
}
textarea:-ms-input-placeholder{
color:#999;
}
三、verticle-align
verticle-align的用法1
verticle-align的用法2
四、页面下方遮盖的内容区如何显现
当手机页面下方的内容被 footer遮盖没有显现出来时，如下图所示：
为了使内容区显现出来，可以通过设置最后一个元素的 margin-bottom 来实现。这样内容区就会被 margin-bottom 挤上来，全部显现出来。如下图所示：
ul li:last-of-type {
margin-bottom:4rem;
}
扫一扫
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
