整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
保證布局內每一級必須設置相對于父級百分比寬度，但設計稿一般都是按照固定寬度設計，內部圖片都是固定大小，拉伸或者縮放時都會導致變形，雖然都夠實現布局寬度上的自適應，但分辨率過高或者過低時都無法達到一個良好的顯示效果，需要設置min-width和max-width來保證頁面最基本的視覺效果
<!DOCTYPE html>
<html>
<head>
<title>Flow Layout Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 30%;
margin-bottom: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
通過CSS3的媒體查詢，根據不同的屏幕尺寸區間設置不同的樣式效果，和不同尺寸的圖片，來保證頁面圖片顯示不失真，布局元素錯亂。當分辨率過低 元素數量眾多時 可控制子元素的顯示和隱藏，以及其他效果組件的展示，比方橫向tab展示 變更為下拉選擇 vscode
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.my-image {
width: 30%;
margin-bottom: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
background-image: url('image-large.jpg');
}
/* 當分辨率在320px到768px之間時，將item元素的背景設置為image-small.jpg */
@media screen and (min-width: 320px) and (max-width: 768px) {
.item {
background-image: url('image-small.jpg');
font-size:12px
}
}
/* 當分辨率大于768px時，將item元素的背景設置為image-large.jpg */
@media screen and (min-width: 769px) {
.item {
background-image: url('image-big.jpg');
font-size:14px
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">hc 1</div>
<div class="item">hc 2</div>
<div class="item">hc 3</div>
</div>
</body>
</html>
柵格布局是一種網格化的頁面布局方式，它由行和列組成，可以使開發者更容易地創建多種不同大小和位置的元素，并通過調整這些元素的行和列來實現響應式設計。柵格布局適用于各種設備尺寸，使得頁面在各種屏幕上都能夠正常顯示。 在柵格布局中，開發者可以定義一個網格容器，然后在容器中定義行和列，用來劃分網格。每個網格可以放置一個或多個元素。通過調整每個元素所占據的行和列，以及它們之間的距離，可以實現各種頁面布局效果。
<template>
<div>
<iv-row :gutter="16">
<iv-col :span="8">
<!-- 左邊 -->
</iv-col>
<iv-col :span="8" :offset="4">
<!-- 中間內容 -->
</iv-col>
<iv-col :span="4">
<!-- 右側內容 -->
</iv-col>
</iv-row>
</div>
</template>
Flex布局也可以用來實現柵格布局，它提供了一些靈活的屬性來定義網格元素的排列和位置。相比于傳統的柵格布局，Flex布局更加靈活，并且在響應式設計上具有更好的適應性。 以下是Flex布局常用的一些屬性
display：定義flex容器，默認值為flex。 flex-direction：定義主軸的方向，包括row、row-reverse、column、column-reverse四個值。 justify-content：定義主軸上網格元素的對齊方式，包括flex-start、flex-end、center、space-between、space-around五個值。 align-items：定義交叉軸上網格元素的對齊方式，包括flex-start、flex-end、center、baseline、stretch五個值。 flex-wrap：定義網格元素是否換行，默認情況下都不換行，可選nowrap、wrap、wrap-reverse三個值。 order：定義網格元素的顯示順序，默認為0，數值越小越靠前。 flex-grow：定義網格元素在剩余空間中所占的比例。 flex-shrink：定義彈性子元素的縮小比例。 flex-basis：定義彈性子元素的基準大小。 flex：是 flex-grow、flex-shrink 和 flex-basis 的簡寫形式。 align-self：定義單個網格元素在交叉軸上的對齊方式。
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
/* flex-grow：1 子元素分配剩余空間* 0 有空間也不放大 2 大一倍/
.item {
flex-grow: 1;
height: 100px;
background-color: gray;
margin: 10px;
text-align: center;
font-size: 30px;
line-height: 100px;
}
.item-1 {
flex-basis: 200px;
}
/* item-2 如何和他倆在一個主軸 始終會比他們大200px*/
.item-2 {
flex-basis: 400px;
}
.item-3 {
flex-basis: 200px;
}
</style>
display：定義為網格容器。 grid-template-areas：指定網格模板中的區域名稱。 -grid-template-columns：指定網格列的大小。 -grid-template-rows：指定網格行的大小。 grid-template：是 grid-template-areas、grid-template-columns 和 grid-template-rows 的簡寫形式。 grid-auto-columns：指定未顯式指定寬度的列的大小。 grid-auto-rows：指定未顯式指定高度的行的大小。 grid-auto-flow：指定如何安排未被顯式布局的項。 grid-column-gap：設置網格行之間的間距。 grid-row-gap：設置網格列之間的間距。 grid-gap：是 grid-row-gap 和 grid-column-gap 的簡寫形式。
grid-area：是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的簡寫形式。 grid-column-start：指定一個項目的列開始位置。 grid-column-end：指定一個項目的列結束位置。 grid-row-start：指定一個項目的行開始位置。 grid-row-end：指定一個項目的行結束位置。 grid-column：是 grid-column-start 和 grid-column-end 的簡寫形式。 grid-row：是 grid-row-start 和 grid-row-end 的簡寫形式。 grid-area：指定項目應該放置在哪個網格區域中。 justify-self：定義單個項目在其列中的對齊方式。 align-self：定義單個項目在其行中的對齊方式。 place-self：是 align-self 和 justify-self 的簡寫形式。
可以將一個元素及其子元素的所有尺寸都放大或縮小。默認的縮放值是1，表示不進行任何縮放。如果將縮放值設置為2，則元素及其子元素的所有尺寸都會變為原來的兩倍；如果將縮放值設置為0.5，則元素及其子元素的所有尺寸都會變為原來的一半。 zoom在兼容性上存在一些問題，目前火狐瀏覽器是不支持，其他瀏覽器支持，存在一定的風險性
實現方式不同：transform: scale() 是通過 CSS3 的 transform 屬性進行縮放，而 zoom 是通過瀏覽器提供的縮放功能實現的。 兼容性不同：transform: scale() 屬性在大部分現代瀏覽器中得到支持，而 zoom 屬性只在 IE 瀏覽器和 Edge 瀏覽器中得到支持。 對布局影響不同：使用 transform: scale() 屬性進行縮放時，元素的尺寸、位置等屬性會改變，但對周圍元素的布局不會產生影響。而使用 zoom 屬性進行縮放時，元素及其周圍的元素都會被縮放，因此可能會影響整個頁面的布局。
rem是CSS3新增的一個相對單位，它是相對于根元素（html元素）的字體大小來計算的。rem的全稱是"root em"，意為"根em"。
使用rem作為長度單位，可以實現頁面的自適應布局。當用戶調整瀏覽器窗口大小或者在移動設備上旋轉屏幕時，頁面中所有元素的大小都會根據當前根字體大小的比例進行縮放，從而適應不同的屏幕尺寸和設備類型。
使用rem作為單位有以下優點：
相對于像素單位（px）更具有可擴展性，可以適應各種不同分辨率的設備。 相對于百分比單位（%）更加直觀，不需要手動計算每個元素的百分比值。 支持低版本瀏覽器，如果無法識別rem單位，也可以提供降級方案。
們將根元素字體大小設置為頁面寬度的百分之一，即font-size: calc(100vw / 100)。然后，在樣式表中使用rem作為單位對元素進行設置，例如.box { width: 20rem; height: 10rem; font-size: 1.6rem; }。這樣，當瀏覽器窗口大小改變時，根元素字體大小也會隨之改變，從而實現頁面的自適應布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rem布局示例</title>
<style>
/* 設置根元素字體大小 */
html {
font-size: calc(100vw / 100);
}
/* 使用rem設置元素屬性 */
.box {
width: 20rem;
height: 10rem;
font-size: 1.6rem;
border:1rem solid #00000
}
</style>
</head>
<body>
<div class="box">這是一個自適應布局的示例</div>
</body>
</html>
npm install postcss-pxtorem postcss-loader --save-dev
module.exports={
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基礎字體大小
propList: ['*'], // 要轉換的屬性列表，這里表示所有屬性都要進行轉換
selectorBlackList: [], // 不需要轉換的選擇器，可以是字符串、正則表達式或者數組
unitPrecision: 5 // 轉換后的rem值保留小數位數
}
}
}
{
test: /.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: './path/to/postcss-config.js'
}
}
}
]
}
.container {
width: 320px;
font-size: 14px;
}
這樣，在編譯時，postcss-pxtorem會自動將像素單位轉換為rem單位。對于上述樣式代碼，轉換后的結果如下：
.container {
width: 20rem; /* 320 / 16=20 */
font-size: 0.875rem; /* 14 / 16=0.875 */
}
通過使用postcss-pxtorem插件，可以簡化自適應布局的實現，并且不需要手動計算每個元素的rem值。
作者：二哈怕不怕
鏈接：https://juejin.cn/post/7301985758467244043
文鏈接： https://getflywheel.com/layout/css-grid-layouts-how-to/
柵格布局的思想起源源自于印刷設計。柵格是用來將設計元素精確定位到頁面上的的測量工具。這種想法經常被用在網頁上來進行內容組織和統一，提升用戶的視覺體驗。
網頁設計剛起步的時候，設計和布局都是是相當簡單的， 通常包含頭部，側邊欄，內容區域和頁腳。現在，隨著網絡的演變，網頁的布局也變得更加復雜，做網頁設計師的人也隨之增加。我們經常需要大量的內容區域，響應式設計，多頁面模板設計，以及許多其他的。浮動和定位在實現這些設計的時候，是必不可少的。但浮動聽起來簡單，實際操作起來卻很棘手。
但接下來，我們會介紹一種簡單的設計布局。隨著CSS柵格布局的不斷發展，成為設計師也會變得越來越容易。
CSS柵格兼容性
作為一名設計師，需要了解網頁設計的未來。CSS柵格布局將改變現有規則，為設計師處理頭痛了許多年的定位。雖然目前還不是主流的做法，但是這是一件值得期待的事情。
在我們真的深入了解柵格布局之前，要強調的一件事，瀏覽器并不普遍支持， 希望這種工作方式在未來可以得到越來越多的瀏覽器支持。不過， 好消息是， 您可以輕松地嘗試使用CSS柵格布局，以及了解它是如何工作的。
在使用示例之前，請你確保你的瀏覽器支持。目前只有Internet Explorer 10+和 edge 支持。其他的瀏覽器通過一些手段也可以瀏覽，但因為它不是官網支持，所以你只能是不斷的去嘗試。（If you view the Can I Use documentation on CSS Grid Layouts, at the time of this post, you will notice little flag indicators. These show that you will need to be in “flag mode.”）如果你邊使用Can I Use來查看柵格布局的兼容性，邊看這篇文章，那么你就可以注意到每個細節的不同。
當您在測試柵格布局的時候，你需要做幾件事情幫助你正確地看到布局。使用Chrome查看，你需要啟用“實驗性網絡平臺功能”。如何啟用呢？在Chrome 瀏覽器中打開chrome://flags 這個地址。當url 鏈接chrome://flags加載完畢之后，向下滾動頁面，找到該選項，設置為“啟用實驗性網絡平臺功能”。
火狐也允許您查看柵格布局，通過“layout.css.grid.enabled”參數設置。開啟方法類似于Chrome瀏覽器的說明。在Firefox瀏覽器中URL輸入 about:config。向下滾動頁面，設置為啟用 “layout.css.grid.enabled” 。
如果你想馬上開始使用CSS柵格布局，對于不支持它的瀏覽器還有一個變通方案。如果你熟悉polyfills的想法，那已經有解決方案了。如果你不熟悉polyfills，可以利用瀏覽器后退，利用JavaScript的力量，允許現代的瀏覽器功能（例如CSS柵格布局）在舊的瀏覽器運行。
Polyfills超出本教程范圍，但隨著越來越多的設計師開始使用這項技術，更多的polyfill 技術將會涌現。如果你準備嘗試，這里是一個推薦的 polyfill option。請務必閱讀作者的文檔，了解有關如何使用它的詳細信息。
那么，在承諾100%使用CSS柵格布局之前，要確保使用的生產代碼，做一些深入的測試。
CSS柵格布局基本知識
通過利用CSS，柵格布局將有助于您的網頁內容的呈現。這里有一篇相對較新的定義的屬性的CSS柵格布局規范 。這是學習柵格設計的一個很好的資源。CSS柵格設計有助于簡化的東西，使創建布局更加容易。想象一下，柵格作為一種結構，尺寸可以被定義。
柵格的組成
行(lines)
在上圖中，有五條垂直線和三條水平線。線從1開始編號。示例中，垂直線從左至右，這取決于書寫方向。如果書寫方向是由右至左，順序就顛倒過來。可以給線起名（可選），方便在CSS中引用。
軌道(tracks)
軌道是兩條平行線之間的空間。在圖中，有四個垂直軌道和兩個水平的軌道。這是線和軌道的共同結果。 線是記錄內容的起點和終點。軌道是內容真實存在的位置。
單元格(cells)
單元格是水平和垂直軌道的相交處。圖中有八個單元格。
面(areas)
單元格指定面的時候發揮作用。面是矩形形狀，可以跨越多個單元格。像線一樣，面也可以任意命名。如在圖中的幾個標簽：“A”，“B”，和“C”。
創建柵格布局
用老方格紙，布局之前，先勾勒輪廓。
HTML柵格
<div class="container">
<div class="grid header">Header</div>
<div class="grid sidebar">Sidebar</div>
<div class="grid content">Main Content</div>
<div class="grid extra">Extra Content</div>
<div class="grid footer">Footer</div>
</div>
容器Container是非常重要的。容器內是用于顯示網站的不同的內容塊。內容塊的順序并不重要。接下來，我們將使用CSS將它們按照我們的布局顯示。
CSS樣式
HTML完成后，我們來寫CSS。給container設置display:grid 或者 display:inline-grid. 如果你希望設置塊級元素，那使用 display:grid ; 如果你希望設置成內聯元素， 那使用display:inline-grid。想了解更多細節，可以查看文檔
.container {
display: grid;
grid-template-columns: 0.25fr 15px 0.75fr;
grid-template-rows: auto 25px auto 25px auto 25px auto;
}
.grid {
background-color: #444;
color: #fff;
padding: 25px;
font-size: 3rem;
}
grid-template-columns和grid-template-rows屬性用于指定行和列的寬度。這個布局定義了五列。15px是兩個元素之間的間距。第三列占用0.25份的剩余空間。同樣地，第五列占用0.75份的剩余空間。（疑問： 圖中根本沒有第五列啊，感覺作者寫錯了）
There are responsive customizations that can be made, but this is a great step to take prior to that. It may seem like using pixel measurements would be limiting, however, using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 25px row acts as a gutter.
對于響應式布局這個規范是很便利的，如果使用像素，則會被限定死。第一行使用grid-template-rows來表示，隨著內容需要的變化而變化。設置padding 成 25 像素，與頭部留有間隙。
元素看起來很緊湊，但再加一些規范，元素將初具規模。
這個例子先放置的頭部，但元素位置可以按您喜歡的任意順序擺放。如果你想從頁腳開始，也可以。
我們先從頭部開始，從列1開始到列4結束，從行1開始到行2結束，CSS看起來就像這樣：
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
您可能會注意到側邊欄被壓住了，我們無法看到它。我們需要重新排列一下。在這種布局,通過行的位置進行排列。以行作為標準。頭部占一行和二行的位置，側邊欄，從三行開始， 到六行結束。 頭部到第二行結束，側邊欄從第三行開始正好可以顯示到頭部下面。要查看示例，請參見該項目Codepen。
我們使用grid-column-start指定一個元素起始垂直線。在本例中,它將被設置為3。grid-column-end表示一個元素的結束垂直線。在這種情況下,這個屬性就等于四。其他行值也用同樣的方式設置。側邊欄的位置是存在的,它只是覆蓋的內容區。
.sidebar {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 6;
background: #a0c263;
}
主要內容在第三列開始，第四列結束。側邊欄和內容區域的頂部對齊，所以他們都從grid-row-start第三行開始。你可能想讓內容欄比側邊欄高很多。通過設置容器上的高度，假如400像素，這個時候，它就會比其它元素高很多。
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #f5c531;
height: 400px;
}
最后兩個內容區域是額外內容區域和頁腳。
.extra {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #898989;
}
.footer {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 7;
grid-row-end: 8;
background: #FFA500;
}
響應式優勢
布局已經創建好了，似乎很像一個“桌面”。那么平板電腦和移動設備怎么顯示？CSS柵格布局加上媒體查詢可以適應不同的屏幕尺寸。真正酷的是，你可以在這些不同的媒體查詢范圍里，改變內容區域。作為一個設計師，這意味著你選擇什么是最適合你的布局在不同的斷點。例如，如果你想要將“次要內容”被放在“內容”區域之上，可以指定正確的行和列。
/* For mobile phones: */
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.extra {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.content {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #f5c531;
height: 400px;
}
通過設置成列1開始，列4結束，來設置成內容全寬。將“次要內容”顯示在了“內容”之上。
CSS柵格布局是一種新型的布局方式。正如你所看到的，這種方法很容易創建一個簡單的頁面布局去運行。上面這個簡單的例子也可以為如何創建更復雜的布局打下良好的基礎。假如這個技術獲得普及，在設計各種設備和尺寸，布局大小自定義的時候，這個技術會是一個優勢。
問切 wenqie（.cn），是切圖網旗下關注用戶體驗，專注H5移動適配的品牌網站。
用HTML怎么制作網頁呢?靜態網站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計 ? ,常用的網頁設計軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當然不同軟件寫出的前端Html5代碼都是一致的。
一、網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
二、網站程序方面：計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網站的效果。
三、網站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網頁風格的圖片，然后使用PS做出適合網頁尺寸的圖片。
四、網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件;
五、網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。 其中： (1) html文件包含：其中index.html是首頁、其他html為二級頁面; (2) css文件包含：css全部頁面樣式,文字滾動, 圖片放大等; (3) js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等(個別網頁中運用到js代碼)。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
