移动web 移动端常用的CSS设置

最新推荐文章于 2024-07-11 13:45:07 发布

houyanhua1

最新推荐文章于 2024-07-11 13:45:07 发布

阅读量1.3k

点赞数

分类专栏：移动web CSS3 CSS 文章标签：移动web css3 css

本文链接：https://blog.csdn.net/houyanhua1/article/details/79714189

版权

CSS 同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

CSS3

33 篇文章 0 订阅

订阅专栏

移动web

10 篇文章 0 订阅

订阅专栏

demo.html：

<!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>Document</title>
</head>
    <style>

        a {
            width: 200px;
            height: 200px;
            display: block;
            -webkit-tap-highlight-color: orange;   /* 设置点击后的高亮颜色 */
            box-sizing: border-box;    /* 移动端一般这样设置。加border和padding后,可放的内容会变小(盒子总大小不变) */
        }

        input {
            border: 0px;
            width: 100px;
            height: 50px;
            background-color: skyblue;
            -webkit-appearance: none;   /* 去除浏览器给input标签添加的默认样式(3D效果) */
        }

        body {
            max-width: 640px;    /* 设置最大宽度 */
            min-width: 320px;    /* 设置最小宽度 */
        }
        /* 结构伪类选择器  :first-of-type  :last-of-type  :nth-of-type(n)  :nth-child(n) */
        /* 为了在移动端适配,宽度一般用百分比,高度由内容撑开,因此高度还是使用具体的值 */

    </style>
<body>
    <a href=""></a>
    <input type="button" value="按钮" >
</body>
</html>