1. 首頁 > 生活百科 > >

HTML-響應式基本用法

小知識

在網站建造中，響應式網站時經常用到的，今天我們就來熟悉一下什么是響應式，好比一個正常的網頁，若是是打開的網頁尺寸寬度是1200px,當設置響應式后，設置為達到800px時，網站發生轉變 。 下面我們就以一個簡單的圖形變換作為參考 。

需要這些哦
HTML
Dreamweaver
方式/
1打開Dreamweaver軟件，新建一個HTML文件

HTML-響應式基本用法



2在body標簽中成立一個盒標簽div

HTML-響應式基本用法



3成立CSS樣式，添加對div的一些潤色，如圖將圖形設置為一個矩形，填充紅色

HTML-響應式基本用法



4將文件保留后，在瀏覽器中預覽，結果如圖所示

HTML-響應式基本用法



5然后添加響應式代碼，固定搭配  @media(max-width:800){}
小括號內添加前提，最年夜或最小 ；年夜括號內添加轉換后結果屬性

HTML-響應式基本用法



6這里將響應后發生的轉變是：寬度降低到400px;高度為300px;顏色轉為藍色；如圖所示設置

HTML-響應式基本用法



7【HTML-響應式基本用法】然后保留在瀏覽器中查看結果，默認時是紅色矩形，當拖動瀏覽器窗口到800px時，發生轉變，轉為藍色小矩形 。

HTML-響應式基本用法



HTML-響應式基本用法



注重事項若是此經驗對您有幫忙，請為我投票加存眷，感謝大師的撐持^_^

以上內容就是HTML-響應式基本用法的內容啦，希望對你有所幫助哦！

    猜你喜歡