html - 使网站适合不同的分辨率

Question

正如标题所说。您如何更改网站，使其在 19"1280*1024 分辨率显示器和 26"1920*1080 分辨率显示器上看起来一样？只要它们不通过 margin:0 auto;

居中，我就会一直遇到不同定位的问题

你如何解决这个问题？互联网没有帮助

Answer 1

您需要让您的网站响应迅速。尝试查看以下链接，

http://www.w3schools.com/html/html_responsive.asp

或者您可以查看可帮助您完成此操作的插件。 RestiveJS 就是一个例子。

http://restivejs.com

使用 RestiveJS:

$.restive.startMulti();

$('body').restive({
      platform: 'ios', 
      breakpoints: ['240', '320', '480', '640', '960', '1024'],
      classes: ['css-i-240', 'css-i-320', 'css-i-480', 'css-i-640', 'css-i-960', 'css-i-1024']
});

$('body').restive({
      platform: 'android', 
      breakpoints: ['240', '320', '480', '640', '960', '1024'],
      classes: ['css-a-240', 'css-a-320', 'css-a-480', 'css-a-640', 'css-a-960', 'css-a-1024']
});

$.restive.endMulti();

Restive.JS 将针对以下宽度范围主动监控访问您网站的任何设备的视口(viewport):0 到 240 像素、241 到 320 像素、321 到 480 像素、481 到 640 像素、641 到 960 像素和 961 到 1024 像素；以及以下设备平台:iOS 和 Android。如果视口(viewport)宽度在 481 到 640 像素之间，并且设备是 iOS 设备，例如iPhone 4，它会将类 css-i-640 添加到标签中；如果视口(viewport)宽度在 641 到 960 像素之间，并且设备是 Android 设备，例如Nexus 4，它将添加类 css-a-960 等。

学习起来并不难，您将能够快速实现..