我会尝试尽可能详细地解释这一点。我有一个响应网站，响应不同的分辨率。在一个特定页面上，在全屏幕上左侧将有8个缩略图，当点击任何缩略图时，右侧将显示其完整图像。
我使用媒体查询在移动屏幕分辨率为320px宽度时将每个img调整为100％。现在每个缩略图和完整图像将具有相同的大小，并且它将是移动布局上的长滚动网页。我想要的是在移动设备的媒体查询期间，我希望能够更改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（Portrait） ================================================== * /
/* 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（Portrait） ================================================== * /
/* 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（风景） ================================================== * /
/* 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上消失，并且只有1个图像帧，当我点击它时，下一个图像将显示出来但我不知道如何使用媒体查询这样做，因为我认为它仅用于改变位置，因为它是css ..
答案 0 :(得分：0)
“使用媒体查询后是否可以更改html？” - - 当然。只要css或脚本运行的时间晚于创建的html，它就会改变。
根据您的要求“当点击任何缩略图时，右侧将显示其完整图像。”
我认为您可以使用一些图库画廊动画框架并启用其响应功能，然后根据您的要求使用媒体查询自定义css以实现您期望的效果。
答案 1 :(得分：0)
只要缩略图在320px宽的屏幕下消失，只需在缩略图的媒体查询部分中添加display：none即可。至于点击/触摸将图片移动到下一个，你将需要javascript。也许某种滑块插件。
或者代替插件，你可以使用css z-index将每个图像叠加在一起，并使用普通的javascript，你可以给onclick更改z-index到图像堆的底部...有点排序就像一个基本的滑块。
这将使您免于使用插件及其所有依赖项。
希望这会有所帮助