[解決]社交按鈕在小尺寸設備

Question

我與它的大顯示屏上，但在抵制小尺寸網頁瀏覽器工作正常社交按鈕的工作對準其產生像圖像「enter image description here」輸出請提供一個解決方案

謝謝

Answer 1

這是很難回答這個問題明確沒有代碼的例子，但你應該能夠改變按鈕的方式顯示在較小的屏幕上通過使用CSS文件中的媒體查詢。

根據圖像判斷，您可能需要從容器元素中刪除一些邊距並調整按鈕大小。

看一看下面的代碼示例：

.social-container { 
 
    list-style-type:none; 
 
    } 
 

 
.social-container li { 
 
    float:left; 
 
} 
 

 
.social-container li + li { 
 
    margin-left: 10px; 
 
} 
 

 
.social-container li button { 
 
    height: 100px; 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
// set max-width to desired width 
 
@media screen and (max-width: 640px) { 
 
    .social-container li { 
 
    float: none; 
 
    margin-left: 0; 
 
    } 
 
    
 
    .social-container li button{ 
 
    height: 50px; 
 
    width: 500px; 
 
    } 
 
}

<ul class=social-container> 
 
    <li><button>FB</button></li> 
 
    <li><button>Twitter</button></li> 
 
    <li><button>Github</button></li> 
 
</ul>

如果你提供有關你的代碼更詳細，我會擴大例如