html如何適應手機,html5頁面怎麼適應個手機的尺寸

時間 2021-09-06 20:16:12

1樓:匿名使用者

有幾種,利用meta標籤、百分比法、使用css3單位rem、**查詢。

利用meta標籤

解釋:viewport指使用者網頁的可視區域,content中的「width」指的是虛擬視窗寬度,上面**意為虛擬視窗/頁面寬度初始比例為1,最小比例為1,最大比例為1,使用者不可擴充套件,頁面不可縮放。

以上標籤只支援一種尺寸,正確的做法是用js動態生成下面標籤,前提是要先獲取螢幕尺寸。

百分比法

css中的百分比中指的是相對於父元素的寬度。子元素的padding-left:50%,父元素的寬度是百,子元素的margin-top:

20%,那麼父元素的高是百。body預設寬度是螢幕寬度(pc中指的是瀏覽器寬度)子孫元素按百分比定位(或指定尺寸)就可以了。但這隻適合佈局簡單的頁面,複雜的頁面實現很困難。

使用css3單位rem

在頁面載入開始時首先判斷window的寬度(是window的寬度($(window).width()),不是螢幕分辯率的寬度(screen.width),兩者差別請自行查閱),假設寬度為w,一個div在寬度為640px的設計稿的下的寬度為dw1,如果html的font-size為100px,那麼這個div的寬度用rem表示是多少呢?

計算:div寬度dw2=dw1/100,px與rem之間換算除以100就可以,這是假定螢幕寬度為640的,而不同寬度的螢幕怎麼處理,為了能保證換算容易那就要為html設定一個合適的font-size,計算:100 / 640 = fontsize / w, fontsize = w / 640 * 100 = w / 6.

4。大多數瀏覽器font-size的最小值為12px,所以只能用100作為縮放比例。

所以會在頭部加上這個js**:

var html = document.queryselector(『html『);

var rem = html.offsetwidth / 6.4;

html.style.fontsize = rem + "px";

**查詢

**查詢正是為解決網頁適應手機螢幕。**查詢的功能就是為不同的「**」設定不同的css樣式,頁面尺寸,裝置螢幕尺寸等,比如我們要為寬度小於480px的頁面中的的元素設定樣式,可以這樣寫,@media screen and (max-width=480px) };具體可自行研究。

2樓:殺死豬的**

首先你要在html頁面頭部加上下面的**;viewport";content=",一些小的模組可以用固定尺寸;meta , name="。

再就是css中要應用到**查詢,不能不用固定尺寸。其次你要把頁面中的寬度修改為百分比;width=device-width; ,也就是@media;initial-scale=1"。

html(hyper text mark-up language )即超文字標記語言,是 www 的描述語言,由 tim berners-lee提出。設計 html 語言的目的是為了能把存放在一臺電腦中的文字或圖形與另一臺電腦中的文字或圖形方便地聯絡在一起,形成有機的整體,人們不用考慮具體資訊是在當前電腦上還是在網路的其它電腦上。這樣,你只要使用滑鼠在某一文件中點取一個圖示,internet就會馬上轉到與此圖示相關的內容上去,而這些資訊可能存放在網路的另一臺電腦中。

html文字是由 html命令組成的描述性文字,html 命令可以說明文字、 圖形、動畫、聲音、**、連結等。 html的結構包括頭部 (head)、主體 (body) 兩大部分。頭部描述瀏覽器所需的資訊,主體包含所要說明的具體內容。

html5頁面怎麼適應個手機的尺寸

3樓:

你好,可以參考

/* 超小螢幕(手機,小於 768px) */

/* 沒有任何**查詢相關的**,因為這在 bootstrap 中是預設的(還記得 bootstrap 是移動裝置優先的嗎?) */

/* 小螢幕(平板,大於等於 768px) */

@media (min-width: @screen-sm-min)

/* 中等螢幕(桌面顯示器,大於等於 992px) */

@media (min-width: @screen-md-min)

/* 大螢幕(大桌面顯示器,大於等於 1200px) */

@media (min-width: @screen-lg-min)

希望可以幫助到你

4樓:帥到坑隊友

現在比較流行的就是用bootstrap做

bootstrap是個css框架 一天就能學會用了

html5前景如何學html5開發有前途嗎

育知同創教育 html5的前景是非常好的,企業現在安卓 ios開發人員都在學習html5混合開發,節約成本 一專多能是未來很多企業用人趨勢!html5工程師在今後的工作中與android ios工程師對接的機率非常大。混合式開發思想培訓出來的學員比單一課程學員薪水高至少2000元,同時企業也更願意去...

HTML5都有哪些學習要點,HTML5主要學習內容有哪些

千鋒鄭州教育 隨著網際網路的高速發展,軟體行業更加火爆,幾乎高薪職位都與軟體行業掛勾,程式設計師成了高薪的標誌。html5作為近幾年非常火的軟體開發語言,更是得到了多人一致的好評和青睞。既然html5這麼火,學習這門課程當然前景更可觀。只要努力學到真東西,前途自然不會差。如果你想學好html5開發語...

HTML5的強大特性有哪些,HTML5都有哪些新特性?

野薔薇叮叮貓 1 向前相容性 核心理念 平滑過渡!不支援html5的瀏覽器可以向前相容,並不會影響web內容的顯示!2 跨平臺執行性 從pc瀏覽器到手機 平板電腦,甚至是智慧電視。只要使用者的裝置支援html5,基於html5的web程式就可以無障礙的執行!3 簡單易用性 相對html4.01,ht...