當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

手机端自适应布局demo

發布時間：2025/5/22 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了手机端自适应布局demo 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原型如下：

要求如下：適應各種機型

源碼如下：

<!DOCTYPE html >
<html>

?? ?<head>
?? ??? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
?? ??? ?<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
?? ??? ?
?? ??? ?<style>
?? ??? ??? ?.container {
?? ??? ??? ??? ?border: 1px solid #F0F1F1;
?? ??? ??? ??? ?-webkit-box-shadow: 0px 3px 3px #c8c8c8;
?? ??? ??? ??? ?-moz-box-shadow: 0px 3px 3px #c8c8c8;
?? ??? ??? ??? ?box-shadow: 0px 3px 3px #c8c8c8;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.search {
?? ??? ??? ??? ?height: 42px;
?? ??? ??? ??? ?margin: 0 20px;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.search_left {
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?margin: 14px 7px 5px 11px;
?? ??? ??? ??? ?width: 8px;
?? ??? ??? ??? ?height: 8px;
?? ??? ??? ??? ?border-radius: 50px;
?? ??? ??? ??? ?border: 3px solid orangered;
?? ??? ??? ??? ?font-size: 12px;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?line-height: 30px;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.search_input {
?? ??? ??? ??? ?float: left;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.search_input input {
?? ??? ??? ??? ?border: none;
?? ??? ??? ??? ?height: 30px;
?? ??? ??? ??? ?margin-top: 5px;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.search_right {
?? ??? ??? ??? ?float: right;
?? ??? ??? ??? ?width: 20px;
?? ??? ??? ??? ?height: 20px;
?? ??? ??? ??? ?margin: 9px 17px 5px 10px;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.search_right img {
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?height: 100%;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.start {
?? ??? ??? ??? ?height: 42px;
?? ??? ??? ??? ?margin: 80px 30px 40px 30px;
?? ??? ??? ??? ?border: 1px solid #F0F1F1;
?? ??? ??? ??? ?-webkit-box-shadow: 0px 3px 3px #c8c8c8;
?? ??? ??? ??? ?-moz-box-shadow: 0px 3px 3px #c8c8c8;
?? ??? ??? ??? ?box-shadow: 0px 3px 3px #c8c8c8;
?? ??? ??? ??? ?background: #ff4343;
?? ??? ??? ??? ?color: #FFFFFF;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?line-height: 40px;
?? ??? ??? ??? ?border-radius: 50px;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.back {
?? ??? ??? ??? ?height: 42px;
?? ??? ??? ??? ?margin: 0px 30px;
?? ??? ??? ??? ?border: 1px solid #F0F1F1;
?? ??? ??? ??? ?-webkit-box-shadow: 0px 3px 3px #c8c8c8;
?? ??? ??? ??? ?-moz-box-shadow: 0px 3px 3px #c8c8c8;
?? ??? ??? ??? ?box-shadow: 0px 3px 3px #c8c8c8;
?? ??? ??? ??? ?background: #FFFFFF;
?? ??? ??? ??? ?color: #1E1F20;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?line-height: 40px;
?? ??? ??? ??? ?border-radius: 50px;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<title>高校地圖</title>
?? ?</head>

?? ?<body>
?? ??? ?<div class="container">
?? ??? ??? ?<div class="search" style="border-bottom: 1px? solid? #F0F1F1;">
?? ??? ??? ??? ?<div class="search_left"></div>
?? ??? ??? ??? ?<div class="search_input"><input type="text" placeholder="定位失敗，手動設置"></div>
?? ??? ??? ??? ?<div class="search_right"><img src="img/scale_search.png" alt="放大" /></div>
?? ??? ??? ?</div>

?? ??? ??? ?<div class="search">
?? ??? ??? ??? ?<div class="search_left"></div>
?? ??? ??? ??? ?<div class="search_input"><input type="text" placeholder="電梯間"></div>
?? ??? ??? ??? ?<div class="search_right"><img src="img/scale_search.png" alt="放大" /></div>
?? ??? ??? ?</div>
?? ??? ?</div>

?? ??? ?<div class="start">開始規劃路線</div>
?? ??? ?<div class="back">返回</div>
?? ?</body>

</html>

若需要轉載，聯系原文作者更多技術文章，行業交流，web前端開發資源，源碼下載，請點擊原文鏈接：祈澈姑娘或者聯系我的微信，姑娘家家創作不易，走過路過點個贊唄

轉載于:https://www.cnblogs.com/wangting888/p/9701923.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的手机端自适应布局demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。