時間：2023-09-24 00:30:02 | 來源：網(wǎng)站運營
時間：2023-09-24 00:30:02 來源：網(wǎng)站運營
HTML+CSS十分鐘實現(xiàn)響應式布局頁面，響應式布局實戰(zhàn)教程：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="#">聯(lián)系我</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> 響應式布局指的是同一頁面在不同屏幕尺寸下有不同的布局。 傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，手機端再開發(fā)一套，而使用響應式布局只要開發(fā)一套就夠了。 響應式設計與自適應設計的區(qū)別：響應式開發(fā)一套界面， 通過檢測視口分辨率，針對不同客戶端在客戶端做代碼處理， 來展現(xiàn)不同的布局和內(nèi)容；自適應需要開發(fā)多套界面， 通過檢測視口分辨率，來判斷當前訪問的設備是pc端、平板、手機， 從而請求服務層，返回不同的頁面。CSS3媒體查詢可以讓我們針對不同的媒體類型定義不同的樣式， 當重置瀏覽器窗口大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。 </p> <a href="#">閱讀全文</a> </div> <img src="1.jpg" class="image"> </div></body> </html>3.3 CSS/* 清除瀏覽器默認邊距，使邊框和內(nèi)邊距的值包含在元素的width和height內(nèi) */* { 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
來源：掘金
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
關鍵詞：布局,響應,實戰(zhàn),教程,實現(xiàn)
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
