H5移动端知识

最新推荐文章于 2024-04-13 13:14:42 发布

luodao_

最新推荐文章于 2024-04-13 13:14:42 发布

阅读量308

点赞数

文章标签： HTML5

一. 使用rem作为单位

html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }

给手机设置100px的字体大小; 对于320px的手机匹配是100px，
其他手机都是等比例匹配; 因此设计稿上是多少像素的话，那么转换为rem的时候，rem = 设计稿的像素/100 即可;

二. 禁用a,button,input,optgroup,select,textarea 等标签背景变暗

在移动端使用a标签做按钮的时候或者文字连接的时候，点击按钮会出现一个 "暗色的"背景，比如如下代码：
<a href="">button1</a>
<input type="button" value="提交"/>
在移动端点击后会出现"暗色"的背景，这时候我们需要在css加入如下代码即可：

a,button,input,optgroup,select,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

页面上通用的模板如下：
<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <title>标题</title>
        <link rel="shortcut icon" href="/favicon.ico">
    </head>
    <body>
        这里开始内容    
    </body>
</html>




webkit表单输入框placeholder的颜色值改变：
如果想要默认的颜色显示红色，代码如下：
input::-webkit-input-placeholder{color:red;}
如果想要用户点击变为蓝色，代码如下：
input:focus::-webkit-input-placeholder{color:blue;}

luodao_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5移动端知识

一. 使用rem作为单位html { font-size: 100px; }@media(min-width: 320px) { html { font-size: 100px; } }@media(min-width: 360px) { html { font-size: 112.5px; } }@media(min-width: 400px) { html { font-size:
复制链接

扫一扫