當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端切图:手机端自适应布局demo

發(fā)布時間：2025/3/14 HTML 14 豆豆

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

手機端自適應(yīng)布局demo
原型如下：

圖片發(fā)自簡書App

要求如下：適應(yīng)各種機型源碼如下：

<!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="定位失敗，手動設(shè)置"></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">開始規(guī)劃路線</div><div class="back">返回</div></body></html>

轉(zhuǎn)載于:https://www.cnblogs.com/wangting888/p/9701919.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。