<del id="wkuuk"></del>

<strike id="wkuuk"></strike>

我們來談談項目中遇到的需要兼容pc端和移動端的css布局

sshe 發布于2019-08-02 15:23 / 1913人閱讀

摘要：首先在里面需要引入移動端屬性布局方式之布局標題布局標題布局內容兼容端和移動端的布局獲取屏幕寬度設置標簽的大小為移動端效果圖端效果圖布局方式之彈性布局布局標題布局內容兼容端和移動端的

首先在head里面需要引入移動端屬性：

1.css布局方式之div + css布局；



 
  
 
 
  
    
    標題: div + css布局
    
  
  
    內容: 兼容pc端和移動端的css布局

/ css /
html,
body {
margin: 0;
}
.box {
margin: 0.4rem;
}
.box .pic_box img {
width: 3rem;
}
.box .content_box {
float: right;
margin-top: -2.7rem;
width: 6rem;
font-size: initial;
}
.box .content_box .title {
height: 0.7rem;
margin-bottom: 0.2rem;
}
.box .content_box .title img {
width: 0.7rem;
height: 0.7rem;
vertical-align: -25%;
}
.box .content_box .title .tip {
/ float: right; /
line-height: 0.7rem;
}
.content {
font-size: 0.4rem;
}
p {
margin: 0;
}

移動端效果圖：

pc端效果圖：

2.css布局方式之彈性布局(flex布局);




  


  
    
    標題: flex布局
  
  
    內容: 兼容pc端和移動端的css布局

/ css /
html,
body {
margin: 0;
}
.box {
display: flex;
justify-content: space-between; / 水平兩邊對齊 /
align-items: center; / 垂直居中 /
margin: 0.6rem;
}
.box .pic_box img {
width: 8rem;
}
.box .content_box {
margin-left: 2rem;
}
.box .content_box .title {
display: flex;
align-items: center;
padding-bottom: 0.6rem;
}
.box .content_box .title img {
width: 32px;
height: 32px;
}
.box .content_box .title p {
margin-left: 0.5rem;
}
.content p {
font-size: 0.8rem;
}
p {
margin: 0;
}

移動端效果圖：

pc端效果圖：

flex布局需要注意的是: 設置彈性布局flex后, 浮動float, clearfix 和vertical-align 等屬性均無效!

3.css布局方式之網格布局(grid布局);

/ css /
html,
body {
margin: 0;
}
.box {
display: grid;
align-items: center; / 垂直居中 /
justify-items: right; / 右對齊 /
grid-template-columns: 8rem auto; / auto表示由瀏覽器自己決定長度 /
grid-gap: 20px;
margin: 0.6rem;
}
.box .pic_box img {
width: 8rem;
}
.box .content_box {
justify-items: left; / 左對齊 /
display: grid;
}
.box .content_box .title {
display: grid;
grid-template-columns: 45px auto;
}
.box .content_box .title img {
width: 32px;
height: 32px;
}
.box .content_box .title p {
line-height: 32px;
}
.content p {
font-size: 0.8rem;
}
p {
margin: 0;
}



 
  
 
 
  
    
    標題: grid布局
  
  
    內容: 兼容pc端和移動端的css布局
  
 


移動端效果圖：

pc端效果圖：

使用grid布局的時候需要注意：設置網格布局以后, 容器子元素的float, display: inline-block,display: table-cell, vertical-align和column- 屬性均無效！

總結：如果需要兼容ie8的時候建議采用div+ css 布局方式，不過未來移動端 flex布局和grid布局是個大趨勢！

GPU云服務器云服務器布局遇到的問題來談談我們可以用vps來干什么 beta2的CSS兼容性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54099.html

我們來談談項目中遇到的需要兼容pc端和移動端的css布局

摘要：首先在里面需要引入移動端屬性布局方式之布局標題布局標題布局內容兼容端和移動端的布局獲取屏幕寬度設置標簽的大小為移動端效果圖端效果圖布局方式之彈性布局布局標題布局內容兼容端和移動端的首先在head里面需要引入移動端屬性： 1.css布局方式之div + css布局；標題: div + css布局內容: 兼容...

miracledan 2019-08-30 11:16 評論0 收藏0
前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

Kerr1Gan 2019-08-26 12:20 評論0 收藏0
前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

lushan 2019-08-02 11:34 評論0 收藏0
前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

joyvw 2019-08-30 15:54 評論0 收藏0
Mac聯機調試移動端頁面方法和移動端IOS遇到的兼容性問題

摘要：移動端失效需求點擊一個，讓某一個聚焦并彈出虛擬鍵盤。安卓可以聚焦，但是不會彈出虛擬鍵盤說明安卓機的表現也是異常的無法聚焦，也不會彈出虛擬鍵盤所以我的這邊的實踐結論是，如果希望在頁面初始化過程中，讓自動聚焦并彈出虛擬鍵盤。移動端IOS遇到的兼容性問題和 Mac聯機調試方法有時候遇到一些移動端「疑難雜癥」，因為移動端不方便調試，可能找不到問題點，所以經常需要電腦端和移動端聯機調試，...

CoreDump 2019-08-23 13:46 評論0 收藏0