首页 话题 小组 问答 好文 用户 我的社区 域名交易 唠叨

[分享]css全局通用样式移动端

发布于 2024-11-11 15:47:35
0
16

CSS的全局通用样式在开发移动端网页时非常重要。全局通用样式可以减少代码冗余,提高网站性能,同时也可以保证网页在不同设备上的显示效果一致。以下是几个常用的全局通用样式示例:/ 去除默认样式 / htm...

CSS的全局通用样式在开发移动端网页时非常重要。全局通用样式可以减少代码冗余,提高网站性能,同时也可以保证网页在不同设备上的显示效果一致。

以下是几个常用的全局通用样式示例:

/* 去除默认样式 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* 使移动设备的1px像素边框变细 */
@media only screen and (-webkit-min-device-pixel-ratio: 2){
    *::before,*::after {
        -webkit-transform:scale(0.5);
        transform:scale(0.5);
    }
}

/* 浏览器默认字体大小 */
body {
    font-size: 16px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* 文字省略号 */
.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 按钮禁用效果 */
.disabled {
    cursor: not-allowed;
    opacity: 0.4;
} 

这些全局通用样式可以作为基础样式,不仅可以提高开发效率,还可以保证网站的一致性。在开发移动端网站时,推荐将这些基础样式添加到自己的CSS文件中,以便快速开发。

评论
一个月内的热帖推荐
91云脑
Lv.1普通用户

62849

帖子

14

小组

291

积分

赞助商广告
站长交流