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) {}
相关文章
|
编解码
【转】响应式布局常用的分辨率
类型     布局宽度       列宽   间隙宽度 大屏幕    大于等于1200px     70px   30px 默认       大于等于980px        60px   20px平板     大于等于768px       42px   20px手机到平板  小于等于...
1136 0
|
前端开发 容器
CSS不同手机型号各种尺寸设备宽高比
CSS不同手机型号各种尺寸设备宽高比
151 0
|
4月前
|
编解码 测试技术 开发工具
测试 iPhone 应用在不同屏幕尺寸和分辨率下的响应式效果
【10月更文挑战第23天】测试 iPhone 应用在不同屏幕尺寸和分辨率下的响应式效果是确保应用质量和用户体验的重要环节。通过手动测试、自动化测试、视觉效果评估、性能测试、用户体验测试等多种方法的综合运用,能够全面地发现应用在响应式效果方面存在的问题,并及时进行解决和优化。同时,持续的测试和优化也是不断提升应用质量和用户满意度的关键。
|
编解码
移动端媒体查询的一些尺寸参考
移动端媒体查询的一些尺寸参考 /*iphone4 4s*/ @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ /* Styles */ } @media screen and (min-...
2033 0
|
Web App开发 编解码 前端开发
第119天:移动端:CSS像素、屏幕像素和视口的关系
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。
1302 0
|
编解码
LabVIEW自适应屏幕分辨率缩放
在使用 LabVIEW进行上位机项目开发的时候软件的分辨率是根据我们所开发的电脑所决定的,但是当开发完的上位机软件运行在其他分辨率较高或者较低的电脑上时可能会出现比例不合适而导致变形。
432 0
|
8月前
|
编解码 前端开发 图形学
采用Canvas Scaler与锚点系统实现UI自适应多屏幕分辨率
【7月更文第10天】在游戏开发或应用设计中,确保用户界面(UI)能够在不同屏幕分辨率和纵横比上保持良好显示效果是一项基本要求。Unity 引擎通过其强大的 UI 系统,特别是 Canvas Scaler 和锚点系统,为开发者提供了实现这一目标的高效工具。本文将深入探讨如何结合使用这两个功能来创建自适应UI布局,以适配广泛的设备屏幕。
425 0
|
Web App开发 前端开发
《CSS3-布局》移动设备网页等比缩放布局
《CSS3-布局》移动设备网页等比缩放布局
1318 0