WooCommerce產(chǎn)品圖片有三種尺寸：
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,南部企業(yè)網(wǎng)站建設,南部品牌網(wǎng)站建設,網(wǎng)站定制,南部網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,南部網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
1、Single Product Image：是最大的縮略圖，用在產(chǎn)品詳情頁面展示產(chǎn)品大圖
2、Catalog Images：用在shop首頁、相關產(chǎn)品、交叉銷售和增量銷售中
3、Product Thumbnails：最小的縮略圖，用在購物車頁、購物車小工具，產(chǎn)品詳情頁大圖下方那一堆小圖也是這個尺寸.
4、下述所有代碼都應放在主題的functions.php中
add_filter(?'woocommerce_output_related_products_args',?'wc_custom_related_products_args'?);
function?wc_custom_related_products_args(?$args?){
$args?=?array(
'posts_per_page'?= 3,
'columns'?= 3,
'orderby'?=?'rand'
);
return?$args;
}
5、只更改數(shù)量無法達到想要的效果，還需要修改樣式表，在主題的style.css里添加如下樣式：
woocommerce .related ul li.product,
woocommerce .related ul.products li.product,
woocommerce-page .related ul li.product,
woocommerce-page .related ul.products li.product{
width:30%;
}
1.目前來說對css支持最好的公認的是火狐瀏覽器，錯位的原因在css代碼書寫不規(guī)范。
2.兼容性：對于CSS（樣bai式表）并不是所有瀏覽器的所有版本都支持的很好，比如IE5以前的瀏覽器對于CSS的支持就不是很好。而現(xiàn)在使用IE5以前版本瀏覽器的用戶不在少數(shù)，這樣就使得在頁面制作的過程中需要針對不同瀏覽器版本進行測試，以保證兼容性，無形中也增加很多工作量（至少我接觸的開發(fā)人員制作div頁面比table頁面的標準時間要長一些）。
3.對css縮寫的支持問題：
不論是ie 還是ff對css的縮寫都有一小點問題比如border: 0xp solid #fff;兩個瀏覽器支持都沒有問題
但對于四個邊的magin不同情況下，就不能用這種縮寫了，無論是ie還是ff又會出現(xiàn)邊界解釋錯誤，而導致頁面變形正確縮寫：border-width:0px 1px 2px 3px;
border-style:solid;
border-color:#fff;
第二點是 ie對于css的magin padding 等默認值為0px，但ff卻不一樣，為了保持外觀的統(tǒng)一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯位。
IE與Firefox的CSS兼容大全 1.DOCTYPE 影響 CSS 處理
2.FF: div 設置 margin-left, margin-right 為 auto 時已經(jīng)居中, IE 不行
3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上
6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行
7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以
8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。
9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，據(jù)阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}
塊元素的之間的間距使用margin屬性設置。
CSS margin 屬性
定義和用法
margin 簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有 1 到 4 個值。
說明
這個簡寫屬性設置一個元素所有外邊距的寬度，或者設置各邊上外邊距的寬度。
塊級元素的垂直相鄰外邊距會合并，而行內(nèi)元素實際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負的外邊距值，不過使用時要小心。
注釋：允許使用負值。
例子 1
margin:10px?5px?15px?20px;
/*
上外邊距是?10px
右外邊距是?5px
下外邊距是?15px
左外邊距是?20px
*/例子 2margin:10px?5px?15px;
/*上外邊距是?10px
右外邊距和左外邊距是?5px
下外邊距是?15px*/
例子 3
margin:10px?5px;
/*
上外邊距和下外邊距是?10px
右外邊距和左外邊距是?5px
*/
例子 4
margin:10px;
/*所有?4?個外邊距都是?10px*/
可能的值
1.靜態(tài)布局
——最傳統(tǒng)的布局方式，網(wǎng)頁中所有尺寸都是由px作為單位，設置了min-width,如果寬度小于就會出現(xiàn)滾動條，如果大于這個寬度則內(nèi)容居中外加背景
實現(xiàn)方式：PC：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調(diào)整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
移動設備：另外建立移動網(wǎng)站，單獨設計一個布局，使用不同的域名如wap.或m.。
優(yōu)點：采用之前的css2的布局·方式，布局簡單，沒有兼容性問題。
缺點: 在手機端不能合理的顯示，移動端不能使用pc端頁面，需要再寫一個布局來呈現(xiàn)。
實踐案例：Float 布局、絕對布局
2.自適應布局
——可以看成是不同屏幕下由多個靜態(tài)布局組成的。自適應布局是為不同的屏幕分辨率分別定義不同的布局。改變屏幕分辨率可以切換不同的靜態(tài)布局（頁面元素位置可能發(fā)生改變），但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。自適應布局頁面里面元素的位置會變化，很好的解決了流式布局中的大屏空間利用率不高弊端。
注：屏幕分辨率變化時，頁面里面元素的位置會變化而大小不會變化。
3.流失布局（百分比布局 %）
網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分數(shù)（搭配min-*、max-*屬性使用),分別為不同的屏幕設置布局格式，當屏幕大小改變時，會出現(xiàn)不同的布局，意思就是在這個屏幕下這個元素塊在這個地方，但是在那個屏幕下，這個元素塊又會出現(xiàn)在那個地方。只是布局改變，元素不變。可以看成是不同屏幕下由多個靜態(tài)布局組成的。
而流式布局的特點是隨著屏幕的改變，頁面的布局沒有發(fā)生大的變化，可以進行適配調(diào)整，這個正好與自適應布局相補。使用%百分比定義寬度，高度大都是用px來固定住，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實時尺寸進行調(diào)整，盡可能的適應各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。這種布局方式在Web前端開發(fā)的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發(fā)也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”
注：屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變。
主要實踐案例：左側固定+右側自適應、左右固定寬度+中間自適應、圣杯布局、雙飛翼布局
4.響應式布局（媒體查詢）
——通過響應式設計能使網(wǎng)站在手機和平板電腦上有更好的瀏覽閱讀體驗。屏幕尺寸不一樣展示給用戶的網(wǎng)頁內(nèi)容也不一樣.利用媒體查詢可以檢測到屏幕的尺寸(主要檢測寬度)，并設置不同的CSS樣式，就可以實現(xiàn)響應式的布局。主要依靠是css的媒體查詢。
注：每個屏幕分辨率下面會有一個布局樣式，即元素位置和大小都會變。
5.彈性布局
——rem/em、flex布局
視口（viewport）是用來約束網(wǎng)頁中最頂級塊元素的，即它決定了網(wǎng)頁的大小，網(wǎng)頁是先在視口上渲染，然后再通過視口放回到瀏覽器窗口上的，網(wǎng)頁的渲染過程如下：
pc端視口的大小和瀏覽器的大小一樣，所以網(wǎng)頁是1：1的放到瀏覽器窗口上，而移動端視口就有點特殊，移動端視口的寬度是比移動端屏幕要寬，寬度尺寸一般是980px或者1024px，網(wǎng)頁是視口上渲染完之后，為了能在移動端屏幕上顯示整個網(wǎng)頁，整個視口會整體縮放到屏幕的寬度，這樣，網(wǎng)頁看上去就整體縮放
具體如何設置視口以及禁止視口頁面縮放可以自行百度
（主要針對移動端以及pc端網(wǎng)頁需要實現(xiàn)等比放大縮小頁面效果）
大概有以下幾種
1、流體布局
流體布局其實就是寬度用百分比，高度用固定值的布局方式，寬度通過百分比來適配不同寬度的屏幕。
為了適配手機端不同尺寸的屏幕，我們在定義元素寬度的時候可以寫百分比，百分比是相對于屏幕的寬度，所有寬度就可以做到自適應，而在高度方向，由于網(wǎng)頁的高度是不定的，所以我們可以把高度寫成固定的值(px),這種布局方式叫做流體布局。
注意兩個概念
2、彈性盒模型布局flex
這種布局方式是通過css3新增的一些輔助布局的樣式屬性來制作布局的方式。
3、rem布局
rem是一種相對長度單位，通過這個長度單位可以實現(xiàn)元素寬高等比例縮放，從而完成不同寬度屏幕的適配。
4、響應式布局 （媒體查詢）
通過樣式動態(tài)查詢屏幕的寬度，動態(tài)切換樣式來適配不同寬度屏幕的布局方式。
Bootstrap是最典型的一種
待補充
實際開發(fā)中，pc端頁面需要實現(xiàn)響應式等比縮放（即自適應），使用rem+彈性布局是比較現(xiàn)實及理想的解決方式
移動端可以使用rem布局，也可以使用px實現(xiàn)（主要用flex），具體看產(chǎn)品是怎么設計要求的
css3規(guī)定：1rem的大小就是根元素html的font-size的值。
rem其實是一個單位 ，是個相對單位 root em。rem就是root（根元素的大?。┫鄬τ趆tml元素的字體大小的單位。
rem布局的原理
就是根據(jù)一個html根元素來控制，網(wǎng)頁的布局，實現(xiàn)類似于自適應等比例的縮放的布局。
rem優(yōu)勢
通過修改html文字的大小，來改變頁面中元素的大小，實現(xiàn)了頁面的整體控制
rem的作用
通過設置 根元素html的font-size的大小，來控制整個html文檔內(nèi)的字體大小、元素寬高、內(nèi)外邊距等，根據(jù)移動設備的寬度大小來實現(xiàn)自適應，不同的設備都展示一致的頁面效果。
簡單用法
vscode中安裝cssrem插件，通過這個插件可以自動計算rem數(shù)值。
具體設置如下
注意:設置后 vscode軟件需要重啟 否則計算的rem值會出錯
待補充
可以通過js的方式來改變，也可以通過css媒體查詢的方式來改變，
待補充
重慶分公司
重慶分公司
