定义和用法
<kbd>标签定义键盘文本。
说到技术概念上的特殊样式时，就要提到 <kbd>标签。正如你已经猜到的，它用来表示文本是从键盘上键入的。
浏览器通常用等宽字体来显示该标签中包含的文本。
<kbd>标签经常用在于计算机相关的文档和手册中。例如：
键入 <kbd>quit</kbd>来退出程序，或者键入 <kbd>menu</kbd>来返回主菜单。
如引用文字所写，目前还只是概念，暂无发现应用案例
显示搜索按钮需要满足3个条件：
1.input在form标签中
2.form标签设置了action属性值
3.input设置type为search
示例如下：
<form action="#">
<input type="search" />
</form>
这种情况下点击搜索按钮会跳转到action对应的地址进行搜索
如果我们需要js来处理搜索逻辑，可以设置form不提交，并且监听输入框的keydown事件
示例如下：
<form action="#" onsubmit="return false">
<input type="search" id="t_search" />
</form>
<script type="text/javascript">
$("#txt_search").keydown(function (e) {
if (e.keyCode == 13) {
//搜索处理
}
})
</script>
还有一个前往按钮，也类似，把type换成text就可以了，所以form很重要，如果我们不放form，就是“换行”按钮了。
end
手机页面设计一般的大小是640，但是，手机屏幕大小确实不确定的，这样，怎么才能做出适应所有手机的手机页面呢？一般的解决方案有两种，rem布局和百分比布局。这两种方案我有都试过，所以现在更推荐用rem布局来制作手机页面
rem布局的兼容性：
Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+、ie6-ie8 还是别用rem
不过现在的手机一般浏览器，一般可以直接不用去管IE内核的浏览器了。
REM的计算公式
例:html 设置font-size:16px 1rem = 16px
那么640px = 640/16 =40rem
个人建议设置为100px 方便计算
首先，给页面的html定义一个100px的
html{ font-size:100px}/*设定基础rem*/
然后，最核心的代码就是这一段js运算了，根据页面的大小来控制基础rem的值；
new function (){
var _self = this
_self.width = 640//设置默认最大宽度
_self.fontSize = 100//默认字体大小
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.widthreturn p>1?1:p<0.5?0.5:p}
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important")
}
_self.changePage()
window.addEventListener("resize",function(){_self.changePage()},false)
}
demo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta charset="utf-8">
<title>rem基础布局</title>
<script type="text/javascript">
new function (){
var _self = this
_self.width = 640//设置默认最大宽度
_self.fontSize = 100//默认字体大小
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.widthreturn p>1?1:p<0.5?0.5:p}
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important")
}
_self.changePage()
window.addEventListener("resize",function(){_self.changePage()},false)
}
</script>
<style type="text/css">
/*=== base style===*/
*{margin: 0pxpadding: 0px}
ul{list-style: none}
.wrap{min-width: 320pxmax-width: 640pxwidth: 100%margin: 0px autobackground: #2a6acefont-family:"微软雅黑", "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei",\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-seriffont-size: 12px}/*适用于手机端：字体大小用em，1em=16px；为默认字体大小最大宽度640*/
.pro{width:6.2remmargin: 0px autopadding-top: 20pxoverflow: hidden}
.clearfix:after {content:""height:0display:blockclear:both}
.clearfix {zoom:1}
.pro ul{width:6.4rem}
.pro li{width: 3remheight: 3.6remfloat: leftmargin: 0 0.2rem 0.2rem 0}
.pro li .box{width: 3remheight: 3rembackground: #ccc}
.pro li p{font-size: 0.24remline-height: 0.6remtext-align: center}
</style>
</head>
<body>
<div class="wrap">
<div class="pro">
<ul class="clearfix">
<li><div class="box"></div><p>区块文案</p></li>
<li><div class="box"></div><p>区块文案</p></li>
<li><div class="box"></div><p>区块文案</p></li>
<li><div class="box"></div><p>区块文案</p></li>
<li><div class="box"></div><p>区块文案</p></li>
</ul>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）