純css控制div, iframe物件(youtube, google map…)長寬比, RWD 等比例縮放 | pure CSS make div, iframe element keep aspect ratio with RWD

iframe物件通常會在html裡直接設定尺寸,但製作RWD網頁時都是在css裡根據不同media制定Media Queries 媒體查詢,因此大家常常會用jQuery的方式直接計算寬高比,只是這個方法會讓網頁載入的時間延遲一點點,這一篇就介紹如何只用CSS來控制iframe物件的寬高比。

title

繼續閱讀 “純css控制div, iframe物件(youtube, google map…)長寬比, RWD 等比例縮放 | pure CSS make div, iframe element keep aspect ratio with RWD"

RWD網頁切版

RWD網頁切版可以分成幾個部份慢慢學習,這一篇當目錄

 

網頁框架切版練習

 

Dreamweaver基本操作部份:

 

相關文章:

css 文字強制換行、強制不換行 | css word break, word wrap

強制不換行
div{
white-space:nowrap;
}
自動換行(依英文單字斷行)
div{
word-wrap:break-word;
word-break:normal;
}
強制英文單字斷行
div{
word-break:break-all;
}

pre物件

pre {
width:640px;/* 下面沒效的話可以再設定寬度 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}