導航:首頁 > 萬維百科 > html5自適應cms

html5自適應cms

發布時間:2021-02-10 18:01:45

1、html5如何設定高度自適應

var width = document.documentElement.clientWidth;
//初始抄化高度
$("#iFrame1").height(width*0.5);
//當文檔窗口發生改變時 觸發
$(window).resize(function(){
$("#iFrame1").height(width*0.5);
});

2、html5 怎麼實現自適應

讓圖片自適應例子
圖片分為背景圖片和通過img標簽引入的圖片,前者可以通過media query自動的切換不同解析度的版本,但是在不支持background image size的瀏覽器中背景圖片無法無級的調整大小(也就是在media query切換css的點上可以換一張不同解析度的圖,但是沒法兒獲得兩張解析度中間大小的版本),而且在很多情況下(比如cms中)並不適合用背景圖片。
如果是img標簽引入的圖片,可以使用延遲載入的方式來載入,在實際載入圖片之前先用js檢查窗口寬度,然後載入不同解析度的圖片,比如寬度<=480,就載入80px寬度的圖片,480 < 寬度 <= 768,載入120px的圖片, 寬度> 768則載入160px的圖片,如果寬度是600px怎麼辦呢,通過百分比來縮放120px的圖片達到合適的結果。
這樣做的好處是對於移動設備來說,下載的圖片會小一些,減少網頁載入的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由於放大而產生一定的模糊感。
響應式設計中對於圖片的考慮應該從布局設計就開始,盡量使圖片在各個窗口寬度下的尺寸不要相差過大,通過排布更多的內容而不是擴大圖片的尺寸來填充由於瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。

3、如何讓網頁自適應所有屏幕寬度

「自適應網頁設計」到底是怎麼做到的?其實並不難。

1.首先,在網頁代碼的頭部,加入一行viewport元標簽。
viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等於屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0
,即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置,包括IE9。對於那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

2、不使用絕對寬度由於網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。具體說,CSS代碼
不能指定像素寬度:width:xxx px;
只能指定百分比寬度:
width: xx%;
或者
width:auto;
3、相對大小的字體
字體也不能使用絕對大小(px),而只能使用相對大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定,字體大小是頁面默認大小的100%,即16像素。
h1 {
font-size: 1.5em;
}
然後,h1的大小是默認大小的1.5倍,即24像素(24/16=1.5)。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍,即14像素(14/16=0.875)。
三、流動布局(fluid grid)
「流動布局」的含義是,各個區塊的位置都是浮動的,不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。
另外,絕對定位(position: absolute)的使用,也要非常小心。
四、選擇載入CSS
「自適應網頁設計」的核心,就是CSS3引入的Media Query模塊。
它的意思就是,自動探測屏幕寬度,然後載入相應的CSS文件。

上面的代碼意思是,如果屏幕寬度小於400像素(max-device-width: 400px),就載入tinyScreen.css文件。

如果屏幕寬度在400像素到600像素之間,則載入smallScreen.css文件。
除了用html標簽載入CSS文件,還可以在現有CSS文件中載入。
五、CSS的@media規則
同一個CSS文件中,也可以根據不同的屏幕解析度,選擇應用不同的CSS規則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是,如果屏幕寬度小於400像素,則column塊取消浮動(float:none)、寬度自動調節(width:auto),sidebar塊不顯示(display:none)。
六、圖片的自適應(fluid image)
除了布局和文本,」自適應網頁設計」還必須實現圖片的自動縮放。
這只要一行CSS代碼:
img { max-width: 100%;}
這行代碼對於大多數嵌入網頁的視頻也有效,所以可以寫成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好寫成:
img { width: 100%; }
此外,windows平台縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById(「content」).getElementsByTagName(「img」);
imgSizer.collate(imgs);
});

4、如何製作html5自適應網頁

html5+css3 利用css3的媒體查詢來為不同的解析度下的網頁設置不同的樣式文件
或者直接使用bootstrap框架來搭建響應式網站
或者你可以找我,專業建站

5、如何讓flash和html5自適應出現

這要取決抄於flash中是不是限制了縮放模式(scaleMode)。
1、flash中沒有設置scaleMode ,可以直接設置flash的容器object的寬度為100%,這樣就會根據屏幕寬度自動縮放。
<object width="100%"></object>
這樣即可設置flash為全屏。
2、flash設置了scaleMode=NO_SCALE,那這樣即使你讓flashplaer全屏那個,flash的主體內容依然會和原來的一樣。

6、做好的html,怎麼讓它轉成html5自適應屏幕大小?

首先你要在html頁面頭部加上下面的代碼,其次你要把頁面中的寬版度修改為百分比權,不能不用固定尺寸,一些小的模塊可以用固定尺寸。再就是css中要應用到媒體查詢,也就是@media,不懂可以百度。

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

7、請問html5 web app和pc 端自適應網站是否一樣?

APP 他說固定手機模式的
pc端網站相應式他說自動的可以自己伸縮成pc 平板 手機模式
你可以參考這個網站看看:ipbun.cn(這個網站就是相應式的)

8、html5自適應單頁面

使用HTML5的localStorage即可。
例如:
當文本框值發生變化時,存儲數據
localStorage.mydata=$('input').val()

下次打開時,讀取
$('input').val(localStorage.mydata||'')

9、html5如何設定高度自適應?

代碼如下:

var width = document.documentElement.clientWidth;

//初始化高度 

$("#iFrame1").height(width*0.5); 

//當文檔窗口發回生改變答時 觸發 

$(window).resize(function(){ 

$("#iFrame1").height(width*0.5); 

});

10、html5 怎麼讓圖片自適應

【效果】

圖片自動伸縮,不會超過屏幕寬度


【原理】

css控制圖片的max-width


【代碼】

要麼直接在圖片代碼裡面設置style,例如<img src="xxx.jpg" style="max-width:100%;"/>

要麼給圖片統一一個class名例如response-img,然後在css文件裡面設置這個class,例如

.response-img {
    max-width: 100%;
}

與html5自適應cms相關的知識