首先要在头部，即<head></head>标签内写自适应代码，如下：
<meta name="viewport" content="width=device-width,initial-scale=10" />
其次，网页内部的元素宽度要使用百分比，在不同的屏幕大小下需使用媒体查询定义不同的css代码，例如：
@media screen and (max-width:640px){
element{ color:#ff0000; } //屏幕宽度小于640px时显示红色字体
}
@media screen and (max-width:480px){
element{ color:#0000ff; } //屏幕宽度小于480px时显示蓝色字体
}首先设置一个大层，这个层包含页面的所有内容，然后设置这个大层的左右边距为百分值就可以了
追问：
稍等，回来一定给个人觉得这个行得通。还有一个问题。如果间距产生的缝隙能不能通过设置背景来解决？
回答：
你可以为body设置
背景图像
，然后左右的间距就不会产生缝隙了啊<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
{padding:0;margin:0;}
div{width:100%;height:200px;background-color: #ccc;}
</style>
</head>
<body>
<div>dddddddddddddd</div>
<script src="jqueryjs"></script>
<script>
$(function(){
$("div")height(200);
$(window)resize(function() {
var h = $(this)height();
if (h<150) h=150;
$("div")css({
height:h
});
});
})
</script>
</body>
</html>
在css设置可改变大小的div滚动条样式方法：
1首先新建html文档，进入代码书写界面。
2在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。
3书写外层轨道css代码。body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/外层轨道/}
这里主要是设置外层轨道的形状和颜色。
4书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/内层轨道/}
这里主要是设置内层轨道的形状和颜色。
5代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
利用width: 100%;和height: 100%解决这个问题
div布局：
未加CSS样式效果：
3添加CSS样式的效果：
最终在浏览器的效果图：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）