时间：2023-09-24 00:30:02 | 来源：网站运营
时间：2023-09-24 00:30:02 来源：网站运营
HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程：1、 什么是响应式布局？
在线咨询
@media screen and (max-width: 300px) { body { background-color: red;}设备的划分情况为：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>响应式页面入门教程：Albert Yang</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"></head> <body> <header> <a href="#" class="logo">AlbertYang</a> <ul class="navigation"> <li><a href="#">首页</a></li> <li><a href="#">博客</a></li> <li><a href="#">联系我</a></li> <li><a href="#">留言板</a></li> <li><a href="#">关于我</a></li> <li><a href="#">照片墙</a></li> </ul> <div class="search"> <input type="text" placeholder="Search"> <i class="fa fa-search" aria-hidden="true"></i> </div> </header> <div class="banner"> <div class="content"> <h2>响应式布局</h2> <p> 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。 传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。 响应式设计与自适应设计的区别：响应式开发一套界面， 通过检测视口分辨率，针对不同客户端在客户端做代码处理， 来展现不同的布局和内容；自适应需要开发多套界面， 通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机， 从而请求服务层，返回不同的页面。CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式， 当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 </p> <a href="#">阅读全文</a> </div> <img src="1.jpg" class="image"> </div></body> </html>3.3 CSS/* 清除浏览器默认边距，使边框和内边距的值包含在元素的width和height内 */* { margin: 0; padding: 0; box-sizing: border-box;}header { position: absolute; left: 0; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px 100px; z-index: 10; background: #5b639c;}header .logo { position: relative; font-size: 1.5em; color: #fff; text-decoration: none; font-weight: 600;}header .navigation { display: flex; justify-content: center; flex-wrap: wrap; margin: 10px 0;}header .navigation li { list-style: none; margin: 0 20px;}header .navigation li a { text-decoration: none; color: #fff; font-weight: 600; letter-spacing: 1px;}header .navigation li a:hover{ color: #ffed3b;}header .search { position: relative; width: 300px; height: 40px;}header .search input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; background: transparent; outline: none; border: 1px solid #fff; border-radius: 5px; padding: 0 10px 0 45px;}header .search input::placeholder { color: #fff;}header .search .fa-search { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; color: #fff; border-right: 1px solid #fff; padding-right: 10px;}.banner { background: #eee; padding: 200px 100px 100px; min-height: 100vh; display: flex; justify-content: space-between; align-items: center;}.banner .content { max-width: 1000px;}.banner .content h2 { font-size: 2.5em; color: #333; margin-bottom: 20px;}.banner .content p { font-size: 1em; color: #333;}.banner .content a { display: inline-block; background: #434978; color: #fff; padding: 10px 20px; text-decoration: none; font-weight: 600; margin-top: 20px;}.banner .image { max-width: 500px; margin-left: 50px;}/*屏幕宽度小于991px,改变布局和样式*/@media screen and (max-width:991px) { header { padding: 10px 20px; flex-direction: column; } .banner { padding: 150px 20px 50px; flex-direction: column-reverse; } .banner .image { max-width: 80%; margin-left: 0; } .banner .content h2 { font-size: 2em; }}/*屏幕宽度小于600px,改变布局和样式*/@media screen and (max-width:600px) { header .search { width: 100%; } .banner .image { margin-top: 30px; }}3.4 图片作者：MisterHou
链接：https://juejin.cn/post/6951651993114902535
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
关键词：布局,响应,实战,教程,实现
