网页CSS怎么解决分辨率不一样的问题？

我在1400*1050上定位，到1024*768上就出问题了！

请问怎么解决，稍微详细点！

推荐答案推荐于2016-10-22

响应式web设计
两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候，应用styleA.css
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时，应用styleB.css
另一种方式，即是直接写在<style>标签里：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
.class {
background: #ccc;
}
}

写法是前面加@media，其它跟link里的media属性相同
其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。

温馨提示：答案为网友推荐，仅供参考

当前网址：http://22.wendadaohang.com/zd/0TCI06C2.html

其他回答

第1个回答推荐于2017-11-25

以前有这样的问题～要多翻翻老帖～
其实就是相对定位和绝对定位的问题～
取值的时候别用PX，用%就是自动适应了

给你一个例子，你可以试着电击浏览器的最大化/还原按钮看看效果，然后再任意调整浏览器的宽高，你会发现，内容始终是随分辨率的改变而改变的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#layout{width:80%;height:400px;border:1px solid #ccc;background:#ff0;margin:0 auto;}
</style>
</head>
<body>
<div id="layout"></div>
</body>
</html>本回答被提问者采纳

第2个回答 2019-12-31

以前有这样的问题～要多翻翻老帖～
其实就是相对定位和绝对定位的问题～
取值的时候别用PX，用%就是自动适应了
给你一个例子，你可以试着电击浏览器的
最大化/还原
按钮看看效果，然后再任意调整浏览器的宽高，你会发现，内容始终是随分辨率的改变而改变的
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/>
<title>无标题文档</title>
<style
type="text/css">
#layout{width:80%;height:400px;border:1px
solid
#ccc;background:#ff0;margin:0
auto;}
</style>
</head>
<body>
<div
id="layout"></div>
</body>
</html>

第3个回答 2019-11-23

一般。
写页面
现在都不采用固定
格式
都是
平铺拉伸。。。
如果一定
要使用的话
大块剧中
在这个方位内在布局
body
{
background-color:
#fff;
background-image:
url(../_img/bg-blue.gif);
background-repeat:
repeat-x;
background-position:
0px
144px;
}
把这个属性
给一个
div
id
让他等于
bodyall
#bodyall
{
background-color:
#fff;
background-image:
url(../_img/bg-blue.gif);
background-repeat:
repeat-x;
background-position:
0px
144px;
}
为什么不直接给他id
为body
因为。
body
是保留字
可以用
但是
不符合
web2标准了。。
在页面内
结束的地方也是
这样周围
给body
一个
配合的
颜色
现在只能这么做了

相似回答

css的绝对定位怎么兼容所有的分辨率答：而是在放大图背景的p里继续放一个安全宽度p，再把它作为父元素做相对定位，给里面的子元素做绝对定位，这样就不会出现不同分辨率下绝对定位错乱的问题了。通过总结网友经验，通过加zoom属性，可以让页面某个区块根据分辨率不同进行自动缩放到合适区域，但是有个bug，就是火狐浏览器打死都不支持这个属性，即...

...是css+div。每个电脑的分辨率都不一样,怎么让网页在不同的浏览器上...答：第一种办法：body的width设置为100%，然后body下的总的div的width设置为固定宽度，比如：然后每个div里面的元素再具体设置宽度。第二种办法，如果你要针对移动端用户，可以使用响应式web设计。即：media screen and (max-width: 768px) and (min-width: 480px){ //这里面写CSS代码 } 如果...

大家正在搜

怎么调网页分辨率电脑网页分辨率怎么调 1屏和2屏分辨率不一样双屏显示分辨率不一样双屏分辨率不一样副屏和主屏分辨率不一样浏览器分辨率怎么调整怎么看电脑分辨率分辨率是不是越高越好