pc端媒体查询尺寸大全

简介: pc端媒体查询尺寸大全

@media screen and (min-width: 0px)and (max-width: 600px) {
    .box {

        &-left,
        &-center,
        &-right {
            width: 100%;
            padding: 10px;
            height: 10%;
            box-sizing: border-box;

            div {
                width: 50%;
                height: 100%;
                background: red;

            }
        }
    }
}

@media screen and (min-width: 600px)and (max-width: 800px) {
    .box {

        &-left,
        &-center,
        &-right {
            width: 100%;
            padding: 10px;
            height: 10%;
            box-sizing: border-box;


            div {
                width: 100%;
                height: 100%;
                background: red;

            }
        }
    }
}

@media screen and (min-width: 800px) and (max-width: 959px) {
    .box {

        &-left,
        &-center,
        &-right {
            width: 100%;
            padding: 10px;
            height: 10%;
            background: #000;
            box-sizing: border-box;

            div {
                // width: 50%;
                width: (200/@size);

                height: 100%;
                background: red;

            }
        }
    }
}


@media screen and (min-width: 960px) and (max-width: 1023px) {}

@media screen and (min-width: 1024px) and (max-width: 1049px) {}

@media screen and (min-width: 1050px) and (max-width: 1151px) {}

@media screen and (min-width: 1152px) and (max-width: 1279px) {}

@media screen and (min-width: 1280px) and (max-width: 1359px) {}

@media screen and (min-width: 1360px) and (max-width: 1366px) {}

@media screen and (min-width: 1400px) and (max-width: 1439px) {}

@media screen and (min-width: 1440px) and (max-width: 1599px) {}

@media screen and (min-width: 1680px) {}
相关文章
|
4月前
|
编解码 测试技术 开发工具
测试 iPhone 应用在不同屏幕尺寸和分辨率下的响应式效果
【10月更文挑战第23天】测试 iPhone 应用在不同屏幕尺寸和分辨率下的响应式效果是确保应用质量和用户体验的重要环节。通过手动测试、自动化测试、视觉效果评估、性能测试、用户体验测试等多种方法的综合运用,能够全面地发现应用在响应式效果方面存在的问题,并及时进行解决和优化。同时,持续的测试和优化也是不断提升应用质量和用户满意度的关键。
|
8月前
|
编解码 前端开发 图形学
采用Canvas Scaler与锚点系统实现UI自适应多屏幕分辨率
【7月更文第10天】在游戏开发或应用设计中,确保用户界面(UI)能够在不同屏幕分辨率和纵横比上保持良好显示效果是一项基本要求。Unity 引擎通过其强大的 UI 系统,特别是 Canvas Scaler 和锚点系统,为开发者提供了实现这一目标的高效工具。本文将深入探讨如何结合使用这两个功能来创建自适应UI布局,以适配广泛的设备屏幕。
412 0
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
107 0
|
前端开发 容器
CSS不同手机型号各种尺寸设备宽高比
CSS不同手机型号各种尺寸设备宽高比
144 0
|
编解码
LabVIEW自适应屏幕分辨率缩放
在使用 LabVIEW进行上位机项目开发的时候软件的分辨率是根据我们所开发的电脑所决定的,但是当开发完的上位机软件运行在其他分辨率较高或者较低的电脑上时可能会出现比例不合适而导致变形。
426 0
|
Web App开发 前端开发
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
112 0
|
前端开发 JavaScript Android开发
|
移动开发 前端开发 HTML5
响应式 - 使视频自适应于屏幕宽度
响应式 - 使视频自适应于屏幕宽度
561 0
响应式 - 使视频自适应于屏幕宽度
|
Web App开发 前端开发
《CSS3-布局》移动设备网页等比缩放布局
《CSS3-布局》移动设备网页等比缩放布局
1317 0