Javascript 当访问者放大或缩小时，如何使我的内容自动调整大小？
当访问者放大或缩小时，如何使我的内容随页面自动调整大小 这只是纯html、css和js代码 我尝试使用“viewport”标记，但仍然无法正确使用它 非常感谢您的帮助Javascript 当访问者放大或缩小时，如何使我的内容自动调整大小？,javascript,html,css,viewport,Javascript,Html,Css,Viewport,当访问者放大或缩小时，如何使我的内容随页面自动调整大小 这只是纯html、css和js代码 我尝试使用“viewport”标记，但仍然无法正确使用它 非常感谢您的帮助 <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Search box with icon</title>
</head>
<style>
#dropdown{
border-top:thin solid #e5e5e5;
border-right:thin solid #e5e5e5;
border-bottom:0;
border-left:thin solid #e5e5e5;
box-shadow:0px 1px 1px 1px #e5e5e5;
float:left;
height:17px;
margin:.8em 0 0 5em;
outline:0;
padding:.4em 0 .4em .6em;
width:400px;
}
#dropdown-holder{
background-color:#f1f1f1;
border-top:thin solid #e5e5e5;
box-shadow:1px 1px 1px 1px #e5e5e5;
cursor:pointer;
float:left;
height:27px;
margin:11px 0 0 0;
text-align:center;
width:50px;
}
#dropdown-holder img{
margin:4px;
width:20px;
}
#search-text-input{
border-top:thin solid #e5e5e5;
border-right:thin solid #e5e5e5;
border-bottom:0;
border-left:thin solid #e5e5e5;
box-shadow:0px 1px 1px 1px #e5e5e5;
float:left;
height:17px;
margin:.8em 0 0 13em;
outline:0;
padding:.4em 0 .4em .6em;
width:400px;
}
#button-holder{
background-color:#f1f1f1;
border-top:thin solid #e5e5e5;
box-shadow:1px 1px 1px 1px #e5e5e5;
cursor:pointer;
float:left;
height:27px;
margin:11px 0 0 0;
text-align:center;
width:50px;
}
#button-holder img{
margin:4px;
width:20px;
}
#nav-body{
background-color: black;
height: 55px;
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
}
.product-box1{
background-color: red;
height: 300px;
width: 300px;
margin-top: 50px;
margin-left: 50px;
}
.product-box2{
background-color: red;
height: 300px;
width: 300px;
margin-top: 50px;
margin-left: 50px;
}
.product-box3{
background-color: red;
height: 300px;
width: 300px;
margin-top: -650px;
margin-left: 480px;
}
.product-box4{
background-color: red;
height: 300px;
width: 300px;
margin-top: 50px;
margin-left: 480px;
}
.product-box5{
background-color: red;
height: 300px;
width: 300px;
margin-top: -650px;
margin-left: 900px;
}
.product-box6{
background-color: red;
height: 300px;
width: 300px;
margin-top: 50px;
margin-left: 900px;
}
body{width:100%;}
</style>
<body>
<input type='text' placeholder='Search...' id='search-text-input' />
<div id='button-holder'>
<img src='https://www.codeofaninja.com/demos/css-examples/textbox-with-search-icon-in-html-css/magnifying_glass.png' />
</div>
<input type='text' placeholder='Dropdown...' id='dropdown' />
<div id='dropdown-holder'>
<img src='https://www.codeofaninja.com/demos/css-examples/textbox-with-search-icon-in-html-css/magnifying_glass.png' />
</div>
<div id="nav-body">
</div>
<div class="product-box1">
</div>
<div class="product-box2">
</div>
<div class="product-box3">
</div>
<div class="product-box4">
</div>
<div class="product-box5">
</div>
<div class="product-box6">
</div>
</body>
</html>
带有图标的搜索框
#下拉列表{
边框顶部：薄实心#E5；
右边框：薄实线#E5；
边界底部：0；
左边框：薄实线#E5；
盒影：0px 1px 1px#e5；
浮动：左；
高度：17px；
边距：8em 0 0 5em；
大纲：0；
填充：.4em 0.4em.6em；
宽度：400px；
}
#下拉式支架{
背景色：#f1f1；
边框顶部：薄实心#E5；
盒影：1px 1px 1px#e5；
光标：指针；
浮动：左；
高度：27px；
利润率：11px0；
文本对齐：居中；
宽度：50px；
}
#下拉式支架{
保证金：4倍；
宽度：20px；
}
#搜索文本输入{
边框顶部：薄实心#E5；
右边框：薄实线#E5；
边界底部：0；
左边框：薄实线#E5；
盒影：0px 1px 1px#e5；
浮动：左；
高度：17px；
边距：8em 0 0 13em；
大纲：0；
填充：.4em 0.4em.6em；
宽度：400px；
}
#按钮座{
背景色：#f1f1；
边框顶部：薄实心#E5；
盒影：1px 1px 1px#e5；
光标：指针；
浮动：左；
高度：27px；
利润率：11px0；
文本对齐：居中；
宽度：50px；
}
#按钮座{
保证金：4倍；
宽度：20px；
}
#导航体{
背景色：黑色；
高度：55px；
利润上限：-8px；
左边距：-8px；
右边距：-8px；
}
.product-box1{
背景色：红色；
高度：300px；
宽度：300px；
边缘顶部：50px；
左边距：50像素；
}
.product-box2{
背景色：红色；
高度：300px；
宽度：300px；
边缘顶部：50px；
左边距：50像素；
}
.product-box3{
背景色：红色；
高度：300px；
宽度：300px；
利润上限：-650px；
左边距：480px；
}
.product-box4{
背景色：红色；
高度：300px；
宽度：300px；
边缘顶部：50px；
左边距：480px；
}
.product-box5{
背景色：红色；
高度：300px；
宽度：300px；
利润上限：-650px；
左边距：900px；
}
.product-box6{
背景色：红色；
高度：300px；
宽度：300px；
边缘顶部：50px；
左边距：900px；
}
正文{宽度：100%；}
当您希望根据视口或窗口大小自动调整大小时，请按以下步骤调整css 在evry CSS类中，你必须使用最大宽度：你的宽度+每次宽度：100%这将启用响应性使用，因此可以用于缩放、调整大小等
#dropdown{
border-top:thin solid #e5e5e5;
border-right:thin solid #e5e5e5;
border-bottom:0;
border-left:thin solid #e5e5e5;
box-shadow:0px 1px 1px 1px #e5e5e5;
float:left;
height:17px;
margin:.8em 0 0 5em;
outline:0;
padding:.4em 0 .4em .6em;
max-width:400px; // max-width
width: 100%; // width 100%
}
#dropdown-holder{
background-color:#f1f1f1;
border-top:thin solid #e5e5e5;
box-shadow:1px 1px 1px 1px #e5e5e5;
cursor:pointer;
float:left;
height:27px;
margin:11px 0 0 0;
text-align:center;
max-width:50px; // max-width
width: 100%; // width 100%
}
#dropdown-holder img{
margin:4px;
max-width:20px; // max-width
width: 100%; // width 100%
}
#search-text-input{
border-top:thin solid #e5e5e5;
border-right:thin solid #e5e5e5;
border-bottom:0;
border-left:thin solid #e5e5e5;
box-shadow:0px 1px 1px 1px #e5e5e5;
float:left;
height:17px;
margin:.8em 0 0 13em;
outline:0;
padding:.4em 0 .4em .6em;
max-width:400px; // max-width
width: 100%; // width 100%
}
#button-holder{
background-color:#f1f1f1;
border-top:thin solid #e5e5e5;
box-shadow:1px 1px 1px 1px #e5e5e5;
cursor:pointer;
float:left;
height:27px;
margin:11px 0 0 0;
text-align:center;
max-width:50px; // max-width
width: 100%; // width 100%
}
#button-holder img{
margin:4px;
max-width:20px; // max-width
width: 100%; // width 100%
}
#nav-body{
background-color: black;
height: 55px;
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
}
.product-box1{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: 50px;
margin-left: 50px;
}
.product-box2{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: 50px;
margin-left: 50px;
}
.product-box3{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: -650px;
margin-left: 480px;
}
.product-box4{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: 50px;
margin-left: 480px;
}
.product-box5{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: -650px;
margin-left: 900px;
}
.product-box6{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: 50px;
margin-left: 900px;
}
当您希望根据视口或窗口大小自动调整大小时，请按以下步骤调整css 在evry CSS类中，你必须使用最大宽度：你的宽度+每次宽度：100%这将启用响应性使用，因此可以用于缩放、调整大小等
#dropdown{
border-top:thin solid #e5e5e5;
border-right:thin solid #e5e5e5;
border-bottom:0;
border-left:thin solid #e5e5e5;
box-shadow:0px 1px 1px 1px #e5e5e5;
float:left;
height:17px;
margin:.8em 0 0 5em;
outline:0;
padding:.4em 0 .4em .6em;
max-width:400px; // max-width
width: 100%; // width 100%
}
#dropdown-holder{
background-color:#f1f1f1;
border-top:thin solid #e5e5e5;
box-shadow:1px 1px 1px 1px #e5e5e5;
cursor:pointer;
float:left;
height:27px;
margin:11px 0 0 0;
text-align:center;
max-width:50px; // max-width
width: 100%; // width 100%
}
#dropdown-holder img{
margin:4px;
max-width:20px; // max-width
width: 100%; // width 100%
}
#search-text-input{
border-top:thin solid #e5e5e5;
border-right:thin solid #e5e5e5;
border-bottom:0;
border-left:thin solid #e5e5e5;
box-shadow:0px 1px 1px 1px #e5e5e5;
float:left;
height:17px;
margin:.8em 0 0 13em;
outline:0;
padding:.4em 0 .4em .6em;
max-width:400px; // max-width
width: 100%; // width 100%
}
#button-holder{
background-color:#f1f1f1;
border-top:thin solid #e5e5e5;
box-shadow:1px 1px 1px 1px #e5e5e5;
cursor:pointer;
float:left;
height:27px;
margin:11px 0 0 0;
text-align:center;
max-width:50px; // max-width
width: 100%; // width 100%
}
#button-holder img{
margin:4px;
max-width:20px; // max-width
width: 100%; // width 100%
}
#nav-body{
background-color: black;
height: 55px;
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
}
.product-box1{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: 50px;
margin-left: 50px;
}
.product-box2{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: 50px;
margin-left: 50px;
}
.product-box3{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: -650px;
margin-left: 480px;
}
.product-box4{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: 50px;
margin-left: 480px;
}
.product-box5{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: -650px;
margin-left: 900px;
}
.product-box6{
background-color: red;
height: 300px;
max-width:300px; // max-width
width: 100%; // width 100%
margin-top: 50px;
margin-left: 900px;
}
假设“访客放大或缩小”的意思是“适应窗口的宽度”，即页面的响应性，那么最简单的方法是使用百分比而不是像素来描述宽度和高度。请理解，百分比指的是封闭块。对于宽度，这通常是的宽度，但不是高度。您还可以使用vw或视口宽度，以获得一个既可用于宽度又可用于高度且一致的单位 在您的示例中，您使用较大的负边距来定位方框。这不是布置一组框的有用方法。如果你想让它们像你现在一样排列，也就是说，一对一对，一对一对，三对交叉，那么
.holder {
display: inline-block;
}
.box {
width: 26vw;
height: 26vw;
border: 1px solid black;
margin-left: 5vw;
margin-bottom: 5vw;
}
.box1 { background-color: red;}
.box2 { background-color: orange;}
.box3 { background-color: yellow;}
.box4 { background-color: green;}
.box5 { background-color: blue;}
.box6 { background-color: purple;}