1. 首页
  2. 问答
  3. 使用媒体查询后可以更改html吗？

使用媒体查询后可以更改html吗？

2014-11-05 54 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

相关问题

 相关问题