iT邦幫忙

DAY 23
1

網頁程式自學亂亂來系列 第 23

自適應css 初次認識

  • 分享至 

  • xImage
  •  

套用boostrap一段時間之後,

每次看到在不同的面板大小,

就會自動改變排版實在是很有趣呢,

原來這叫做自適應啊!

上網找一些資料瀏覽了一下,

發覺要做自適應有幾點是很重要得

1.在當中加入

<meta name="viewport" content="width=device-width, initial-scale=1" />

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

2.設定字體或區塊大小要使用%或em或auto(不要直接指定px)

3.愛用float,只要面板太小,就會自己流動到下面去

4.根據不同的螢幕大小寫CSS檔案,並且在加進來

<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 指定螢幕大小px)"
href="樣板一.css" />

<link rel="stylesheet" type="text/css"
media="screen and (min-width:指定螢幕大小範圍px) and (max-device-width: 指定螢幕大小範圍px)"
href="樣板二.css" />

5.或者直接在CSS裡面設定不同螢幕大小的CSS設定

@media screen and (max-device-width: 螢幕大小px) {

/*這裡是CSS設定*/

}

6.圖片或其他元件要跟著螢幕大小改變大小就要記得加上

max-width: 100%;

簡單的重點就是這樣子~


上一篇
會員登入php
下一篇
MD5不只是幫密碼加密而已!!
系列文
網頁程式自學亂亂來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言