如何使此html响应

我是网站开发的新手。我试图响应此代码…但它不起作用。 我只是想让这个页面有响应性。 我正在尝试此网页在手机、平板电脑和笔记本电脑视图上响应 这是我的html代码

正文{背景色：黑色} .main{margin:0 auto；padding:0px；背景色：白色；字体系列：Arial，Helentica；字体大小：12px；颜色：000；宽度：935px；背景色：白色} .header{宽度：814px；高度：123px；填充：65px 0px 0px 120px；字体大小：12px；颜色：黑色；字体系列：Arial；背景色：白色} .logo1{float:left；padding right:50px；} .logo2{float:right；padding right:50px} .text1{float:left；text align:center；字体大小：20px；颜色：brown} .navbar{float:left；padding:0px；margin:0px；背景色：灰色；高度：30px；位置：绝对；宽度：934px} .navbar ul{显示：内联；列表样式：无；} .navbar li{float:左；文本对齐：居中；字体：普通粗体12px/2.5em Arial，verdana；文本装饰：无；} .navbar ul li a{填充：0 20px 0 20px；左边框：1px纯黑色；文本装饰：无；颜色：白色；显示：块线；高度：50px；} .navbar li:hover，a:hover{背景色：黑色；} .navbar li ul{显示：无；高度：自动；边距：0；填充：0} .navbar li ul{位置：绝对；宽度：100%；左侧：0} .navbar li:hover ul{display:block} .navbar li ul li{背景色：灰色；边框：1px纯黑色} .navbar li ul li a:hover{背景色：黑色；} 中间包装{宽度：934px；边距：0自动；填充：0px；} 中间包装内部{宽度：934px；浮动：左侧；背景色：白色} 左包装器{宽度：296px；浮动：左；底色：白色} 左包装顶部{宽度：296px；背景：白色；填充：14px 0px 12px 0px；浮动：左；} 视频{宽度：270px；浮动：左；填充：1px 0px 10px 15px；颜色：fff；字体系列：Arial，Helvetica，无衬线；字体大小：12px；背景色：白色} .link{字体系列：Arial，Helvetica，无衬线；字体大小：12px；字体重量：粗体；颜色：fff；文本装饰：无；文本对齐：右；} .link:hover{font-family:Arial，Helvetica，sans-serif；字体大小：12px；字体大小：粗体；颜色：fff；文本装饰：无；文本对齐：右；} .link2{字体系列：Arial，Helvetica，无衬线；字体大小：12px；字体大小：粗体；颜色：bc4105；文本装饰：无；文本对齐：右；} .link2:hover{font-family:Arial，Helvetica，sans-serif；字体大小：12px；字体重量：粗体；颜色：bc4105；文本装饰：无；文本对齐：右；} 右包装器{宽度：596px；浮动：左；填充：15px 0px 0px 25px；} .右部分{宽度：596px；浮点：左；} foter{宽度：934px；边距：0自动；填充：0px；颜色：999999；} 内部{宽度：934px；浮动：左；填充：10px 0px；} .footer链接{颜色：999999；文本装饰：无；填充：0px 5px；} .footer链接：悬停{颜色：999999；文本装饰：无；填充：0px 5px；} 这是我的html 我有自举，我试了很多，但它变得一团糟 请帮忙 @仅介质屏幕，最大宽度：1024px{ 身体{ 背景色：黑色； } } @仅介质屏幕，最大宽度：768px{ 身体{ 背景色：黑色； } } 瓦达阿格尼霍特里工程学院 靠近绕行公路，Nagthana路Sindimeghee：ace@agnihotri.org 电话：07152-250152 消息

大学考试的所有优秀学生：

大学2018年夏季考试时间表可在下载部分获得：

视频 欢迎来到阿格尼霍特里工程学院 在这个angnihotri工程学院是一个非常大的学院他们有很多学生和教师的设施所以请检查我的网站给很多学生我希望这是一个非常好的学院。。 我们的愿景 发展全球胜任、高效的学习者和面向社区的工程教育模式。 我们的密森 创造增值、有能力、有研究 为社会的可持续发展培养面向arch的工程专业人才。 主席致辞 我很自豪也很高兴向您介绍ACE，并欢迎您来到这所享有盛誉的机构，ACE通过各种知识机构的激增，管理着前所未有的增长 咆哮的信息 我们的愿景是培养一支强大、热情的工程专业人才，并拥有全球一流的学术地位。全球化给竞争、培训和安置带来了许多挑战 原则的信息 教育是人类的基本美德，是社会的需要，是美好生活的基础。艾迪生说，教育之于灵魂，犹如雕塑之于大理石。

&复制 设计人

---

使用引导网格布局，如container、col-md、col-xs、col-sm和in-style-give-width:%n不使用px

---

对于

我认为，在这种情况下，最好向上使用断点

例如，在移动设备上，您希望宽度为100%。无需媒体查询，从基本行为开始

div.item {
    width: 100%; // div is 100% by default, so actually not needed
    background-color: #000;
}

对于平板电脑及以上版本，您可能需要添加例外情况：宽度50%、浮动和灰色背景：

@media(min-width: 768px) {
    // tablet
    .item {
        width: 50%;
        float: left;
        background: #ccc;
    }
}

等等

@media(min-width: 992px) {
    .item {
        // ....
    }
}

@media(min-width: 1200px) {
    // desktop
    .item {
        // ....
    }
}

将div标记

置于body标记下方，并在body标记上方将其关闭 如：

. . .

---

然后使用css use.maintag{margin left=10px；margin right=10px}Yes@akshadaRohokale，它可能使用媒体查询