div+css 如何自动适应浏览器大小
5个回答
展开全部
网页自适应浏览器大小：
首先要在头部，即<head></head>标签内写自适应代码，如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
其次，网页内部的元素宽度要使用百分比，在不同的屏幕大小下需使用媒体查询定义不同的css代码，例如：
@media screen and (max-width:640px){
element{ color:#ff0000; } //屏幕宽度小于640px时显示红色字体
}
@media screen and (max-width:480px){
element{ color:#0000ff; } //屏幕宽度小于480px时显示蓝色字体
}
首先要在头部，即<head></head>标签内写自适应代码，如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
其次，网页内部的元素宽度要使用百分比，在不同的屏幕大小下需使用媒体查询定义不同的css代码，例如：
@media screen and (max-width:640px){
element{ color:#ff0000; } //屏幕宽度小于640px时显示红色字体
}
@media screen and (max-width:480px){
element{ color:#0000ff; } //屏幕宽度小于480px时显示蓝色字体
}
已赞过
已踩过<
你对这个回答的评价是？
展开全部
宽度100%就好了
不过高度的话需要把HTML和BODY的高度弄成100% 里面的DIV才回100%
不过高度的话需要把HTML和BODY的高度弄成100% 里面的DIV才回100%
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用ps切图，将背景图切成3份，然后定3个div用position:absolute;将div定位即可
<body>
<div id="wrapper">
<div class="bg_c">
<div class="bg_l"></div>
<div class="bg_r"></div>
</div>
</div>
</body>
<body>
<div id="wrapper">
<div class="bg_c">
<div class="bg_l"></div>
<div class="bg_r"></div>
</div>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
全屏的话，就设置
body
{
width:100%;
}
如果想居中的话
就设置
body
{
margin:0 auto;
width:1024px;
}
body
{
width:100%;
}
如果想居中的话
就设置
body
{
margin:0 auto;
width:1024px;
}
追问
是这样的 div中1920.1080的图片能否在1366.768完全显示？
追答
这个不行的，你如果想全屏显示，很简单啊
设置body的背景为你的图片
然后再body里放一个div，让这个div居中显示
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
（续）上个评论里我说要展示完整版的，如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<style type="text/css">
@media screen and (max-width:640px){
.element{ color:#ff0000;font-size:32px; } //屏幕宽度小于640px时显示红色字体
}
@media screen and (max-width:480px){
.element{ color:#0000ff;font-size:16px; } //屏幕宽度小于480px时显示蓝色字体
}
</style>
</head>
<body>
<p class="element">hahah</p>
</body>
</html>
直接复制过去，新建一个文件，把文件名加后缀名都改掉，变成 1.html ，直接拖到浏览器里，切换最大化按钮，往左拖拽到最窄的宽度，马上就能看出来效果了。
喜欢，一定要给我点赞哈！
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<style type="text/css">
@media screen and (max-width:640px){
.element{ color:#ff0000;font-size:32px; } //屏幕宽度小于640px时显示红色字体
}
@media screen and (max-width:480px){
.element{ color:#0000ff;font-size:16px; } //屏幕宽度小于480px时显示蓝色字体
}
</style>
</head>
<body>
<p class="element">hahah</p>
</body>
</html>
直接复制过去，新建一个文件，把文件名加后缀名都改掉，变成 1.html ，直接拖到浏览器里，切换最大化按钮，往左拖拽到最窄的宽度，马上就能看出来效果了。
喜欢，一定要给我点赞哈！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
