MORE
了解詳細內容
當前位置:首頁 > 新聞觀點 > 常見問題 >

移動手機網站怎么才能自適應屏幕

文章來源:暢想網絡 | 本文作者:小編 | 發布時間:2015-06-25 21:55:08 | Tag標簽:手機網站制作
06

25 2015

移動手機網站的趨勢不容小看,隨著科技的發展,越來越多的智能手機蜂擁而出,互聯網科技從此也要崛起。今天的教程介紹下,頁面如何自動適應屏幕。其實這個功能現在做起來很簡單,以下操作步驟和解決方案。
首先是css代碼實例篇
#change-color {
width:300px;
height:300px;
margin:50px auto;
background:red;
}
@media (max-width:800px){
#change-color {
width:90%;
height:300px;
margin:50px auto;
background:blue;
}
}
這段css可以分作兩個部分,寫好代碼之后我們可以發現,剩下的內容也是對#change-color 的定義,只是跟上面略有不同,一個是寬度發生了變化,一個是背景色改了。那么現在我們來解釋一下這部分代碼。
默認情況執行第一部分的定義,那么背景色就應該是紅色的,寬度是300px。一切如同我們與想的一樣。當瀏覽器內容部分的寬度小于等于800px(符合條件,最大寬度為 800px)時,使用第二部分的定義,也就是寬度變成了90%,背景色變成了藍色。
然后我們看看實際效果:當網頁寬度大于800px
網頁自適應寬屏
然后調整窗口寬度到內容區域小于800px。
相關內容
網站導航:首 頁 | 關于我們 | 服務項目 | 新聞觀點 | 客戶案例 | 解決方案 | 聯系我們
澳洲幸运10开奖历史 兔悠便利店赚钱吗 gta5富兰克林那个产业赚钱 怎么投资公司最赚钱 现在能赚钱的行业是什么 康复科赚钱么 汉正街卖布匹赚钱吗 在手机上怎么能够赚钱 油茶嫁接茶花赚钱吗 起点签约了怎么赚钱 主机版 巫师3 赚钱 微信砍价赚钱 我怎么才能加入今日头条极速版赚钱 微信上发的教人赚钱的是真是假 小游戏app如何赚钱 拖拉机改装铲车赚钱吗 梦幻西游吸附石不赚钱吗