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开奖历史 516棋牌游戏中心? 下载广东11选5 辽宁35选7好运3中奖金额 重庆幸运农场 吉林麻将抓牌顺序 摇钱树捕鱼游戏平台 澳洲幸运8是哪个国家开奖 湖南转转麻将可以吃吗 琼崖海南麻将 pc蛋蛋幸运28开 河北11选5下载 浙江20选5开奖结果查询 山东群英会 福州麻将规则百度 北京pk拾订阅开奖结果 股票调出融资融券