-1
私は、デスクトップに表示される2つのものをモバイルでは表示されないようにする方法を考えています。今起こっていることは、自分のコードの2つの側面が画像とクラスタイトルがデスクトップにあり、何が隠れているのか（ユーザーが何を得るためにクリックしなければならないのか）は、プロジェクトの説明です。私のデスクトップバージョンは完璧で、私はそれを望んでいますが、私が抱える唯一の問題は、モバイルでは私が以前に2つのクリック可能なステップではなくプロジェクトの説明を表示したいということです。私はこれがdisplay：noneと何か関係があることを知っています。またはディスプレイのプロパティの組み合わせが、私が試してきたものは動作していないようです。モバイルとデスクトップの問題を表示しない
JSONファイルだけでなく複数のhtmlページがあるため、これをスニペットやフィドルにどのように入れるかはわかりませんでした。その場合、私はそれがアクセス可能になるようにURLをリンクします。
これは意味をなさないか、明確にするために私が必要な場合は、私はもっと幸せになるでしょう！私は実際にこれにいくつかの助けを使用することができますので、そこに誰かがこれを修正する方法についてのアイデアがあれば、それは非常に高く評価されるでしょう！ありがとう。ここ
http://sws.mnstate.edu/ry6750sm/data-proj/education2.html
education.htmlある：ここ
\t <body>
\t <hr class="hr2">
<section id="content">
<div id="container">
<h2 >Class Projects</h2>
<div id="movecontainer">
<div id="move">
<div class="third ">
<div id="classes"><!--was event -->
<a id="GDES203" href="GDES203.html" ><img src="img/circlecircle.png" alt="GDES203" />GDES203</a>
<a id="gcom355" href="gcom355.html" ><img src="img/circlecircle.png" alt="GCOM355" />GCOM355</a>
<a id="COM230" href="COM230.html" ><img src="img/circlecircle.png" alt="COM230" />COM230</a>
</div>
</div>
<div class="third ">
<div id="projects"><!--was sessions -->
<p>Select a class</p>
</div>
</div>
<div class="third">
<div id="details"></div>
</div>
</div>
\t \t </div>
</div><!-- #container -->
</section><!-- #content -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/gcomclasses.js"></script>
\t
\t
</body>は、記述HTMLである：
<body>
<header>
</header>
<div id="Fender-Guitar" class="flex-item">
<h3>Fender Stratocaster Electric Guitar</h3>
<a href="three-projects/int-com-graph/guitar2.png"><img alt="company logo" src="three-projects/int-com-graph/guitar2.png" height="150"/></a>
<p>The guitar is a Fender Stratocaster Electric Guitar that I replicated in Adobe Illustrator. I used shadows and highlights to create depth for the piece as well as added gradient detail. </p>
</div>
<div id="Fancy-Fishes" class="flex-item">
<h3>Fancy Fishes</h3>
<a href="three-projects/int-com-graph/Hw3-Mclain-graning2 copy.jpg" ><img alt="company logo" src="three-projects/int-com-graph/Hw3-Mclain-graning2 copy.jpg" height="150"/></a>
<p>Fancy Fishes is a clothing line that features the underwater style and I created this piece by using many gradient meshes, a scaling pattern for the fish, and layered meshes for the realistic pearl effect. </p>
</div>
<div id="Dragon-Tracks" class="flex-item">
<h3>Dragon Tracks</h3>
<a href="three-projects/int-com-graph/covercover.jpg"><img alt="company logo" src="three-projects/int-com-graph/covercover.jpg" height="150"/></a>
<p>This CD cover was inspired by icycles. The way I captured this look was by using photos of melted crayon wax and putting it into Adobe Photoshop and changing the hue to get the desired color. The smoke was created in Adobe Illustrator as a brush to try and create a unique smoked icycle style. </p>
</div>
<div id="Gelato-Company" class="flex-item">
<h3>L'Airone Gelato</h3>
<a href="three-projects/graphic-design/gelato.jpg"><img alt="company logo" src="three-projects/graphic-design/gelato.jpg" height="150"/></a>
<p>This design was for a gelato company that served all its ice cream as coffee flavors. Thus, I tried to create a coffee-oriented design with a logo centered around coffee in an ice cream cone. </p>
</div>
<div id="Company-Logo" class="flex-item">
<h3>Company Logo</h3>
<a href="three-projects/graphic-design/abstract.jpg"><img alt="company logo" src="three-projects/graphic-design/abstract.jpg" height="150"/></a>
<p>This piece was inspired by the idea of creating a logo for a company with an abstract panda logo. This company's logo is made up of pieces that unify the panda and thus the company. </p>
</div>
<div id="Band-Logo" class="flex-item">
<h3>Band Logo</h3>
<a href="three-projects/graphic-design/abpanC.jpg"><img alt="company logo" src="three-projects/graphic-design/abpanC.jpg" height="150"/></a>
<p>This logo was inspired by the band KISS. If KISS was to have a panda as their mascot then this is the type of logo that they would have. This was made with the crystallize tool in Adobe Illustrator to get the spiky feel. </p>
</div>
<div id="Photo-1" class="flex-item">
<h3>Flower</h3>
<a href="three-projects/Photography_pics/flower.jpg"><img alt="company logo" src="three-projects/Photography_pics/flower.jpg" height="150"/></a>
<p>This photo was created with a painting with light technique where the camera captures a light pattern through long exposure. The more the light is moved in the shot and the longer the exposure, the lighter and movement of light is captured. This photo was captured with a thirty second exposure and edited in Adobe Photoshop. </p>
</div>
<div id="Photo-2" class="flex-item">
<h3>Graffiti</h3>
<a href="three-projects/Photography_pics/IMG_0441.jpg"> <img alt="company logo" src="three-projects/Photography_pics/IMG_0441.jpg" height="150"/></a>
<p>This photo was captured in the heart of downtown Fargo. The graffiti was on a random building from an anonymous artist. So the origins of the art is unknown, however the piece is beautifully painted and was edited in Adobe Photoshop. </p>
</div>
<div id="Photo-3" class="flex-item">
<h3>Grains of Sand</h3>
<a href="three-projects/Photography_pics/IMG_0505.jpg"><img alt="company logo" src="three-projects/Photography_pics/IMG_0505.jpg" height="150"/></a>
<p>This photo was captured of a building’s wall in downtown Fargo that was eroding. The intent of the photo was to try and capture the details of the wall so that the viewer could see the grains of sand. </p>
</div>
</body>はJavascriptを次のとおりです。ここで
// NOTE: This example will not work locally in all browsers.
// Please try it out on the website for the book http://javascriptbook.com/code/c08/
// or run it on your own server.
$(function() { // When the DOM is ready
var projectList; // Declare global variable
$.ajax({
beforeSend: function(xhr) { // Before requesting data
if (xhr.overrideMimeType) { // If supported
xhr.overrideMimeType("application/json"); // set MIME to prevent errors
}
}
});
// FUNCTION THAT COLLECTS DATA FROM THE JSON FILE
function loadClassProjects() { // Declare function
$.getJSON('data/projects.json') // Try to collect JSON data
.done(function(data){ // If successful
projectList = data; // Store it in a variable
}).fail(function() { // If a problem: show message
$('#classes').html('Sorry! We could not load the Class Projects at the moment');
});
}
loadClassProjects(); // Call the function
// CLICK ON THE EVENT TO LOAD A ClassProjects
$('#content').on('click', '#classes a', function(e) { // User clicks on event
e.preventDefault(); // Prevent loading page
var loc = this.id.toUpperCase(); // Get value of id attr
var newContent = ''; // Build up ClassProjects by
for (var i = 0; i < projectList[loc].length; i++) { // looping through events
newContent += '<li><span class="software">' + projectList[loc][i].software + '</span>';
newContent += '<a href="descriptions.html#';
newContent += projectList[loc][i].title.replace(/ /g, '-') + '">';
newContent += projectList[loc][i].title + '</a></li>';
}
$('#projects').html('<ul>' + newContent + '</ul>'); // Display projectList on page
$('#classes a.current').removeClass('current'); // Update selected item
$(this).addClass('current');
$('#details').text(''); // Clear third column
});
// CLICK ON A SESSION TO LOAD THE DESCRIPTION
$('#content').on('click', '#projects li a', function(e) { // Click on session
e.preventDefault(); // Prevent loading
var fragment = this.href; // Title is in href
fragment = fragment.replace('#', ' #'); // Add space after#
$('#details').load(fragment); // To load info
$('#projects a.current').removeClass('current'); // Update selected
$(this).addClass('current');
});
});はJSONです：
ここ{
"GDES203": [
{
"software": "Illustrator",
"title": "Gelato Company"
},
{
"software": "Illustrator",
"title": "Company Logo"
},
{
"software": "Illustrator",
"title": "Band Logo"
}
],
"GCOM355": [
{
"software": "Illustrator",
"title": "Fender Guitar"
},
{
"software": "Illustrator",
"title": "Fancy Fishes"
},
{
"software": "Indesign Illustrator Photoshop",
"title": "Dragon Tracks"
}
],
"COM230": [
{
"software": "Photoshop",
"title": "Photo 1"
},
{
"software": "Photoshop",
"title": "Photo 2"
},
{
"software": "Photoshop",
"title": "Photo 3"
}
]
}はCSSです：
#attended{
margin-left: 20px;
\t margin-right:20px;
\t font-size:25px;
\t margin-top:80px;
}
body {
background-color: #fff;
height:100%;
font-family: 'Open Sans', arial, sans-serif;
width: 960px;
margin: 0 auto 0 auto;
\t color: white;
}
.all{
\t margin-left: auto;
\t margin-right: auto;
\t display:block;
}
h1 {
font-weight: normal;
margin: 28px 0 0 0;
float: left;
width: 225px;
height: 90px;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
h2 {
font-size: 40px;
text-align: center;
padding: 0;
color: white;
line-height: 1em;
letter-spacing: -.06em;}
h3 {
margin: 0;
font-size: 1.4em;
color: #29BCCA;
font-family: 'Philosopher', sans-serif;
\t padding-bottom: 15px;
}
a {text-decoration: none; color: white;}
.third, .classes {
width: 320px;
float: left;
text-align: center;
}
.hr2{
\t border: none;
border-bottom: 1px solid #999;
\t width: 70%;
\t color:#485A5F;
\t height: 2px;
}
.classes p {border-right: 1px solid #999 ;
\t \t \t
}
#content .classes:last-child p {border-right: none;}
.third p {
padding: 0 20px 0 20px;
margin: 40px 0 20px 0;
text-align: left;
line-height: 1.4em;}
/* Projects */
#classes a {
font-family: 'Philosopher', sans-serif;
font-size: 120%;
text-transform: uppercase;
text-align: left;
line-height: 2.5em;
display: block;
height: 120px; width: 100%;}
#classes img {
width: 30px;
height: 30px;
float: left;
margin-right: 10px;
padding: 10px;
}
#classes a:hover, #projects a:hover {color: #1DA0A3;}
#projects a {
font-family: 'Sahitya', serif;
font-size: 120%;}
#projects p {
margin-top: 2em;}
#projects ul {
border-left: 1px solid #999;
border-right: 1px solid #999;
height: 350px;
padding: 0 20px 0 20px;
margin: 0 0 40px 0;}
#projects li {
list-style-type: none;
padding: 40px 0px 40px 0px;
border-top: 1px solid #d6d6d6;
text-align: left;
}
#projects li:first-child {
border-top: none;
padding-top: 1.8em;}
#projects li .software {
display: inline-block;
width: 110px;
}
#details div {
padding: 1.8em 0 0em 1;}
#details p {
padding: 10px;
margin: 0.8em 0 0 2em;}
あなたはメディアクエリを試してみましたか？ – Ananya
@ananyaはい、私はちょうど2つの最初の手順をブロックし、モバイルでの説明を表示する方法については混乱している – Cakers
どの2つのステップ？説明していただけますか？あなたの必要条件についてはっきりとわかりません。あなたは何について話していますか？ – Ananya