﻿/* ============================================
   /portal/assets/css/global-device-adapt.css
   不同移动设备适配全局代码
   ============================================ */
   
/************************************
 * ⭐ 不同移动设备适配
 ************************************/
/* 默认：小屏手机（宽度 < 360px） → 左侧栏更宽 */
@media (max-width: 360px) {
    .brand-fixed-sidebar {
        width: 22%;
    }
    body.brand-mode .portal-container {
        margin-left: 22%;
    }
}

/* 中等屏幕（360px ~ 420px）→ 左侧栏 18% */
@media (min-width: 360px) and (max-width: 420px) {
    .brand-fixed-sidebar {
        width: 18%;
    }
    body.brand-mode .portal-container {
        margin-left: 18%;
    }
}

/* 大屏手机（> 420px）→ 左侧栏 14% */
@media (min-width: 420px) {
    .brand-fixed-sidebar {
        width: 14%;
    }
    body.brand-mode .portal-container {
        margin-left: 14%;
    }
	
}  

/************************************
 * ⭐ DPR（像素密度）适配
 ************************************/

/* 高清屏（DPR ≥ 3，例如 iPhone、小米旗舰） */
@media (min-resolution: 3dppx) {
    .brand-fixed-sidebar {
        width: 16%;
    }
    body.brand-mode .portal-container {
        margin-left: 16%;
    }
}

/* 中等屏（DPR 2 ~ 3，例如华为、OPPO） */
@media (min-resolution: 2dppx) and (max-resolution: 3dppx) {
    .brand-fixed-sidebar {
        width: 18%;
    }
    body.brand-mode .portal-container {
        margin-left: 18%;
    }
}
/* -------------不同移动设备适配---结束---------------- */
