网页CSS怎么解决分辨率不一样的问题？
4个回答
展开全部
响应式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属性相同
其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。
两种方式，一种是直接在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属性相同
其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
以前有这样的问题～要多翻翻老帖～
其实就是相对定位和绝对定位的问题～
取值的时候别用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>
其实就是相对定位和绝对定位的问题～
取值的时候别用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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
以前有这样的问题～要多翻翻老帖～
其实就是相对定位和绝对定位的问题～
取值的时候别用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>
其实就是相对定位和绝对定位的问题～
取值的时候别用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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一般。
写页面
现在都不采用固定
格式
都是
平铺拉伸。。。
如果一定
要使用的话
大块剧中
在这个方位内在布局
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
一个
配合的
颜色
现在只能这么做了
写页面
现在都不采用固定
格式
都是
平铺拉伸。。。
如果一定
要使用的话
大块剧中
在这个方位内在布局
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
一个
配合的
颜色
现在只能这么做了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
