关于回应式网站，像素和密度

本文介绍了关于回应式网站，像素和密度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我编写了一个响应式网站，其中我有CSS媒体查询，以检测用户正在浏览的设备的屏幕大小（像素）。I have coded a responsive website, in which I have CSS media queries to detect the screen size(pixels) of the device the user is navigating with.标准介质。示例：@media (max-width: 1199px){ /*code*/}@media (max-width: 991px){ /*code*/}@media (max-width: 767px){ /*code*/}当我用我的手机测试我的网站，这是一个三星Galaxy S4与1920x1080像素我的网站显示我的移动版本，这是在这种情况下的@media查询的最大宽度为767px。When I test my website with my mobile, which is a Samsung Galaxy S4 with 1920x1080 pixels my website shows me the mobile version, which is in this case the @media query with a max-width of 767px.我知道大多数事情会太小，无法阅读或看到，如果我的手机尊重像12px字体大小的确切措施。I understand that most things would be too small to read or be seen if my mobile respected exact measures like 12px font size.所以我的问题是，如何控制我的网站的版本显示So my question is, how do I control which version of my website is shown on high resolution devices, because pixels media queries aren't working in my case.推荐答案@media (max-width: 1199px){ /*code*/}媒体查询中的 max-width 属性有点不同。它不是屏幕的分辨率。它是等效的css像素。The max-width property in the media query works a little different. It is not the resolution of the screen. It is equivalent css pixel.这里有几篇文章。 像素身份危机。 像素不是像素不是像素。 moz媒体查询页。moz media query page.如果您要指定装置解析度，请使用If you want to target device resolution you should use@media all and (max-device-width: 320px) {}. max-device-width ：测量设备宽度。如果你写css使用媒体查询使用这将得到一点复杂（手机标签，甚至桌面可以有1080p分辨率屏幕）。为了定位设备分辨率，您可能需要查看属性，如 - device-pixel-ratio ， orientation code> device-height 以更好地控制布局max-device-width:This property measures the device-width. If you write css using media query using this it will get a little complex (mobiles tabs and even desktops can have 1080p resolution screens). In order to target device resolutions you might have to look into properties like -device-pixel-ratio , orientation and device-height to give better control of layouts 这篇关于关于回应式网站，像素和密度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！