媒体查询深入理解(适配)

269 阅读1分钟

在2560*1440的笔记本电脑上实际打印出来window.screen.width是1707,window.screen.height是960 (因为笔记本缩放了150%)

image.png

在2560*1600的笔记本电脑上实际打印出来window.screen.width是1707,window.screen.height是1067 (因为笔记本缩放了150%)

image.png

重点:媒体查询适配的时候是根据window.screen.width和window.screen.height进行适配的!!!

因此:

模拟lidanying的电脑分辨率进行调试,要输入2560x1440,切忌不可输入3840*2160 testsize.com这个网址测试也是一样

模拟产品经理的笔记本分辨率进行调试,要输入1707x960,切忌不可输入2560*1440

image.png

模拟的后端的笔记本分辨率进行调试,要输入1707x1068,切忌不可输入2560*1600

image.png

注意:用工具模拟其他不同分辨率的电脑的时候,控制台打印出的仍然是你本机电脑的屏幕分辨率!!!

image.png