1. 首頁
  2. 問答
  3. 使用媒體查詢後可以更改html嗎？

使用媒體查詢後可以更改html嗎？

2014-11-05 39 views
0

我會盡量詳細解釋這一點。我有一個響應不同解決方案的響應式網站。在一個特定的頁面上，全屏幕會在左側顯示8個縮略圖，點擊任何縮略圖時，右側將顯示完整圖像。使用媒體查詢後可以更改html嗎？

我使用媒體查詢來適應每個img到100％的移動屏幕分辨率在320px寬度。現在，每個縮略圖和完整圖像的大小都是相同的，並且它將成爲移動版面上的一個長時間滾動的網頁。我想要的是在移動設備的媒體查詢期間，我希望能夠更改html，以便將所有圖像疊加爲一個圖像，而點擊後它將切換到下一個圖像。不知道我怎麼能做到這一點。有小費嗎？

我的CSS，我正在使用骨架的響應框架。

/* #Base 960 Grid

=========================================== ======= */

/* My own addon 
================================================== */ 
.header-wrap, header      { height:200px; } 
.container .header_text      { max-height:40px; } 
.accordionContent       { height:510px; } 

/* skeleton defaults 
================================================== */ 
.container         { position: relative; width: 960px; margin: 0 auto; padding: 0; } 
.container .column, 
.container .columns       { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 
.row          { margin-bottom: 20px; } 

/* Nested Column Classes */ 
.column.alpha, .columns.alpha    { margin-left: 0; } 
.column.omega, .columns.omega    { margin-right: 0; } 

/* Base Grid */ 
.container .sixteen.columns.full-width  { width:960px; } 
.container .one.column, 
.container .one.columns      { width: 40px; } 
.container .two.columns      { width: 100px; } 
.container .three.columns     { width: 160px; } 
.container .four.columns     { width: 220px; } 
.container .five.columns     { width: 280px; } 
.container .six.columns      { width: 340px; } 
.container .seven.columns     { width: 400px; } 
.container .eight.columns     { width: 460px; } 
.container .nine.columns     { width: 520px; } 
.container .ten.columns      { width: 580px; } 
.container .eleven.columns     { width: 640px; } 
.container .twelve.columns     { width: 700px; } 
.container .thirteen.columns    { width: 760px; } 
.container .fourteen.columns    { width: 820px; } 
.container .fifteen.columns     { width: 880px; } 
.container .sixteen.columns     { width: 940px; } 

.container .one-third.column    { width: 300px; } 
.container .two-thirds.column    { width: 620px; } 

/* Offsets */ 
.container .offset-by-one     { padding-left: 60px; } 
.container .offset-by-two     { padding-left: 120px; } 
.container .offset-by-three     { padding-left: 180px; } 
.container .offset-by-four     { padding-left: 240px; } 
.container .offset-by-five     { padding-left: 300px; } 
.container .offset-by-six     { padding-left: 360px; } 
.container .offset-by-seven     { padding-left: 420px; } 
.container .offset-by-eight     { padding-left: 480px; } 
.container .offset-by-nine     { padding-left: 540px; } 
.container .offset-by-ten     { padding-left: 600px; } 
.container .offset-by-eleven    { padding-left: 660px; } 
.container .offset-by-twelve    { padding-left: 720px; } 
.container .offset-by-thirteen    { padding-left: 780px; } 
.container .offset-by-fourteen    { padding-left: 840px; } 
.container .offset-by-fifteen    { padding-left: 900px; }

/* #Tablet（肖像） ========================== ======================== */

/* Note: Design for a width of 768px */ 

@media only screen and (min-width: 768px) and (max-width: 959px) { 

    /* My own addon 
    ================================================== */ 
    .header-wrap, header      { height:350px; } 
    .header-wrap div.nine.columns.logo   { width: 358px; } 
    .header-wrap div.three.columns.header-tab1, 
    .header-wrap div.four.columns.header-tab2 { width:175px; } 
    .container div.six.columns.empty   { width:150px; }   
    .header-wrap .logo { width:364px; } 
    .header-wrap div.six.columns.header-text { width: 386px;} 
    .container p.header_text, 
    .container p.header_text2     { font-size:50px; } 
    .header_nav ul li       { margin:0; margin-top:10px; width:100%;}  

    .accordionContent       { height:410px; } 


    /* skeleton defaults 
    ================================================== */ 
    .container .sixteen.columns.full-width  { width:768px; } 
    .container         { width: 768px; } 
    .container .column, 
    .container .columns       { margin-left: 10px; margin-right: 10px; } 
    .column.alpha, .columns.alpha    { margin-left: 0; margin-right: 10px; } 
    .column.omega, .columns.omega    { margin-right: 0; margin-left: 10px; } 
    .alpha.omega        { margin-left: 0; margin-right: 0; } 
    .container .one.column, 
    .container .one.columns      { width: 28px; } 
    .container .two.columns      { width: 76px; } 
    .container .three.columns     { width: 124px; } 
    .container .four.columns     { width: 172px; } 
    .container .five.columns     { width: 220px; } 
    .container .six.columns      { width: 268px; } 
    .container .seven.columns     { width: 316px; } 
    .container .eight.columns     { width: 364px; } 
    .container .nine.columns     { width: 412px; } 
    .container .ten.columns      { width: 460px; } 
    .container .eleven.columns     { width: 508px; } 
    .container .twelve.columns     { width: 556px; } 
    .container .thirteen.columns    { width: 604px; } 
    .container .fourteen.columns    { width: 652px; } 
    .container .fifteen.columns     { width: 700px; } 
    .container .sixteen.columns     { width: 748px; } 

    .container .one-third.column    { width: 236px; } 
    .container .two-thirds.column    { width: 492px; } 

    /* Offsets */ 
    .container .offset-by-one     { padding-left: 48px; } 
    .container .offset-by-two     { padding-left: 96px; } 
    .container .offset-by-three     { padding-left: 144px; } 
    .container .offset-by-four     { padding-left: 192px; } 
    .container .offset-by-five     { padding-left: 240px; } 
    .container .offset-by-six     { padding-left: 288px; } 
    .container .offset-by-seven     { padding-left: 336px; } 
    .container .offset-by-eight     { padding-left: 384px; } 
    .container .offset-by-nine     { padding-left: 432px; } 
    .container .offset-by-ten     { padding-left: 480px; } 
    .container .offset-by-eleven    { padding-left: 528px; } 
    .container .offset-by-twelve    { padding-left: 576px; } 
    .container .offset-by-thirteen    { padding-left: 624px; } 
    .container .offset-by-fourteen    { padding-left: 672px; } 
    .container .offset-by-fifteen    { padding-left: 720px; } 
}

/* #Mobile（肖像） ========= ========================================= */

/* Note: Design for a width of 320px */ 

@media only screen and (max-width: 767px) { 
    /* My own addon 
    ================================================== */ 
    .header-wrap, header      { height:670px; } 
    .header-wrap div.nine.columns.logo img  { width: 100%; } 
    .header-wrap div.three.columns.header-tab1 img, 
    .header-wrap div.four.columns.header-tab2 img { width:100%; } 
    div.six.columns.empty      { margin-left: 30px; width:0px; height:0px; } 
    .container p.header_text, 
    .container p.header_text2     { font-size:50px; margin-top:0px; } 
    .header_nav ul li       { margin:0; margin-top:10px; width:100%; } 
    .container .four.columns.banner img   { width: 100%; } 
    .footer-wrap .container div.five.columns { width:auto; } 
    .footer-wrap .container div.eleven.columns { width:100%; } 
    .accordionContent       { height:2910px; } 
    .gap          { margin-bottom:10px !important;} 

    /* skeleton defaults 
    ================================================== */ 
    .container .sixteen.columns.full-width  { width:300px; } 
    .container { width: 300px; } 
    .container .columns, 
    .container .column { margin: 0; } 
    .container .one.column, 
    .container .one.columns, 
    .container .two.columns, 
    .container .three.columns, 
    .container .four.columns, 
    .container .five.columns, 
    .container .six.columns, 
    .container .seven.columns, 
    .container .eight.columns, 
    .container .nine.columns, 
    .container .ten.columns, 
    .container .eleven.columns, 
    .container .twelve.columns, 
    .container .thirteen.columns, 
    .container .fourteen.columns, 
    .container .fifteen.columns, 
    .container .sixteen.columns, 
    .container .one-third.column, 
    .container .two-thirds.column { width: 300px; } 

    /* Offsets */ 
    .container .offset-by-one, 
    .container .offset-by-two, 
    .container .offset-by-three, 
    .container .offset-by-four, 
    .container .offset-by-five, 
    .container .offset-by-six, 
    .container .offset-by-seven, 
    .container .offset-by-eight, 
    .container .offset-by-nine, 
    .container .offset-by-ten, 
    .container .offset-by-eleven, 
    .container .offset-by-twelve, 
    .container .offset-by-thirteen, 
    .container .offset-by-fourteen, 
    .container .offset-by-fifteen { padding-left: 0; } 

}

/* #Mobile（Landscape） ===================================== ============= */

/* Note: Design for a width of 480px */ 

@media only screen and (min-width: 480px) and (max-width: 767px) { 
    /* My own addon 
    ================================================== */ 
    .header-wrap, header      { height:770px; }    
    div.six.columns.empty      { margin-left: 30px; width:0px; height:0px; } 
    .container p.header_text, 
    .container p.header_text2     { font-size:50px; margin-top:20px; } 
    div.four.columns.header-text1    { width:180px; } 
    div.six.columns.header-text2    { width:240px; }   
    .footer-wrap .container div.eleven.columns { width:240px; margin-left: 20px; } 
    .accordionContent       { height:4010px; } 



    /* skeleton defaults 
    ================================================== */ 
    .container .sixteen.columns.full-width  { width:420px; } 
    .container { width: 420px; } 
    .container .columns, 
    .container .column { margin: 0; } 
    .container .one.column, 
    .container .one.columns, 
    .container .two.columns, 
    .container .three.columns, 
    .container .four.columns, 
    .container .five.columns, 
    .container .six.columns, 
    .container .seven.columns, 
    .container .eight.columns, 
    .container .nine.columns, 
    .container .ten.columns, 
    .container .eleven.columns, 
    .container .twelve.columns, 
    .container .thirteen.columns, 
    .container .fourteen.columns, 
    .container .fifteen.columns, 
    .container .sixteen.columns, 
    .container .one-third.column, 
    .container .two-thirds.column { width: 420px; } 
}

/* #Clearing ======================= =========================== */

/* Self Clearing Goodness */ 
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } 

/* Use clearfix class on parent to clear nested columns, 
or wrap each row of columns in a <div class="row"> */ 
.clearfix:before, 
.clearfix:after, 
.row:before, 
.row:after { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; } 
.row:after, 
.clearfix:after { 
    clear: both; } 
.row, 
.clearfix { 
    zoom: 1; } 

/* You can also use a <br class="clear" /> to clear columns */ 
.clear { 
    clear: both; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
}

我的HTML的縮略圖和圖像

<div class="container content"> 
    <div class="sixteen columns full-width alpha omega accordionDiv"> 
     <div id='accordion'> 
      <ul>    
       <li class='has-sub active'><a href='#'><span>Click thumbnails to enlarge</span></a> 
        <ul> 
         <li class="accordionContent"> 
          <div id="sectionTwo_thumbnail" class="sectionTwo four columns"> 
           <img id="portfolio1" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio1.jpg"> 
           <img id="portfolio2" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
           <img id="portfolio3" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
           <img id="portfolio4" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
           <img id="portfolio5" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
           <img id="portfolio6" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
           <img id="portfolio7" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
           <img id="portfolio8" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
           <img id="portfolio9" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
           <img id="portfolio10" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
           <img id="portfolio11" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
           <img id="portfolio12" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg"> 
          </div> 

          <div id="sectionTwo_mainPic" class="twelve columns"> 
           <img class="twelve columns" src="page_a3da/sectionTwo_a3da_portfolio_highlight1.jpg"> 
           <img class="twelve columns" src="page_a3da/sectionTwo_a3da_portfolio_highlight2.jpg"> 
          </div> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div>     
    </div> 
</div>

上面的html代碼我有2個主要圖像相互重疊，所以當縮略圖點擊時它會顯示相應的主圖像。我現在想讓所有的縮略圖在媒體查詢320px上消失，並且只有一個圖像幀，當我點擊它時，下一張圖像會顯示出來，但我不知道如何做到這一點與媒體查詢，因爲我認爲它只是改變位置，因爲它是css ..

來源

2014-11-05 Devon

+0

你可以展示你當前的媒體查詢CSS如何看起來像？ – Sai 2014-11-05 01:57:30

+0

完@sai謝謝 – Devon 2014-11-05 02:13:33

回答

0

至於使縮略圖在320px寬的屏幕中消失，只需將display：none添加到縮略圖的媒體查詢部分即可。只要點擊/觸摸將圖片移動到下一張，就會出現需要javascript的情況。也許某種滑塊插件。

或者不是插件，您可以使用css z-index將每個圖像疊加在一起，只需使用普通的javascript，就可以使onclick將z-index更改爲圖像堆的底部。就像一個簡單的滑塊。

這樣可以避免使用插件及其所有依賴項。

希望這有助於

來源

2014-11-05 02:24:39 Sai

+0

我可以使用我用作主圖像的相同策略嗎？它實際上包含兩個彼此重疊的圖像，並且只有點擊鏈接到主圖像的縮略圖纔會顯示。所以，而不是疊加和響應縮略圖點擊這次我讓它響應圖像點擊。是顯示：沒有什麼是我需要的。謝謝 – Devon 2014-11-05 02:27:43

+0

很高興能有所幫助 – Sai 2014-11-05 02:36:29

0

「使用媒體查詢後可以更改html嗎？」 ----當然。只要css或腳本運行的時間比創建的html晚，它就會改變。

根據您的需求「當點擊任何縮略圖時，右側將顯示它的完整圖像。」

我認爲你可以使用一些圖片庫動畫框架並啓用其響應功能，然後根據您的要求使用媒體查詢來定製CSS來實現預期的效果。

來源

2014-11-05 01:57:39 BOBO

+0

當然我會在這裏更新在一秒 – Devon 2014-11-05 02:06:31

+0

done @bobo @ sai – Devon 2014-11-05 02:13:04

相關問題

 相關問題