CSS中关于不同分辨率下的样式设置注意事项

最新推荐文章于 2023-07-02 15:22:21 发布

原创最新推荐文章于 2023-07-02 15:22:21 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #media

本文介绍了一个简单的响应式网页头部结构及当屏幕分辨率小于1360像素时的具体样式设置方法，包括背景颜色、宽度等属性。

需要注意的有2点

1.头部

<!DOCTYPE html>
<html>
<head>
    <title>任务详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

2.具体样式，当屏幕分辨率<1360时的样式设置

@media screen and (max-width: 1360px) {
    .theadGroup {
        background-color:#ffff00;
        width: 450px;
    }
    .wrap{
        width: 438px;
        word-wrap: break-word;
        word-break: break-all;
    }
    .sub{
        font-weight: 500;
        color: #ccc;
    }
}