使网站适合不同的分辨率

Question

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

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

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

Answer 1

看看 "CSS3 Media Rules" 我想这可能就是您要找的。

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

您需要考虑使用液体布局，而不是使用 px 或 pt，而是使用百分比，例如，您可以将 header div 高度设置为屏幕的 20%

http://maxdesign.com.au/news/liquid/

Answer 3

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

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 将针对以下宽度范围主动监控访问您网站的任何设备的视口：0 到 240 像素、241 到 320 像素、321 到 480 像素、481 到 640 像素、641 到 960 像素，以及961 到 1024 像素；以及以下设备平台：iOS 和 Android。如果视口宽度在 481 到 640 像素之间，并且设备是 iOS 设备，例如iPhone 4、将class css-i-640添加到标签中；如果视口宽度介于 641 和 960 像素之间，并且设备是 Android 设备，例如Nexus 4，它会添加class css-a-960等。

学习起来并不难，你很快就能实现..

使网站适合不同的分辨率

Making websites suitable for different resolutions

html

css

layout

resolution