質問編集履歴

1 写真追記

kuroishi

kuroishi score 39

2017/06/19 23:37  投稿

-webkit-transformと@media screen について
お世話になっております。
今回はcssで-webkit-transformについての問題です。@media screenを使い、スマホ版に対応するようプログラミングしてみましたがうまくいきません。
CSS
```ここに言語を入力
.menu-trigger,
.menu-trigger span {
     display: inline-block;
     transition: all .4s;
     box-sizing: border-box;
}
.menu-trigger.active span:nth-of-type(2) {
     opacity: 0;
}
@media screen and (min-device-width: 480px){
   
   .menu-trigger {
       position: relative;
       width: 30px;
       height: 20px;
       z-index:10001;
   }
   .menu-trigger span {
       position: absolute;
       left: 0;
       width: 30px;
       height: 2px;
       background-color: #000;
       border-radius: 4px;
   }
   .menu-trigger span:nth-of-type(1) {
       top: 0;
   }
   .menu-trigger span:nth-of-type(2) {
       top: 10px;
   }
   .menu-trigger span:nth-of-type(3) {
       top: 20px;
   }
   .menu-trigger.active span:nth-of-type(1) {
       -webkit-transform: translateY(10px) rotate(-45deg);
       transform: translateY(10px) rotate(-45deg);
   }
   
   .menu-trigger.active span:nth-of-type(3) {
       -webkit-transform: translateY(10px) rotate(45deg);
       transform: translateY(-10px) rotate(45deg);
   }
}
@media screen and (min-width: 480px) {
   .menu-trigger {
       position: relative;
       width: 30px;
       height: 20px;
       z-index:10001;
   }
   .menu-trigger span {
       position: absolute;
       left: 0;
       width: 30px;
       height: 2px;
       background-color: #000;
       border-radius: 4px;
   }
   .menu-trigger span:nth-of-type(1) {
       top: 0;
   }
   .menu-trigger span:nth-of-type(2) {
       top: 10px;
   }
   .menu-trigger span:nth-of-type(3) {
       top: 20px;
   }
   .menu-trigger.active span:nth-of-type(1) {
       -webkit-transform: translateY(10px) rotate(-45deg);
       transform: translateY(10px) rotate(-45deg);
   }
   
   .menu-trigger.active span:nth-of-type(3) {
       -webkit-transform: translateY(10px) rotate(45deg);
       transform: translateY(-10px) rotate(45deg);
   }
}
@media screen and (min-device-width: 0px) and (max-device-width: 480px) {
   .menu-trigger {
       position: relative;
       width: 100px;
       height: 60px;
       z-index:10001;
   }
   .menu-trigger span {
       position: absolute;
       left: 0;
       width: 100px;
       height: 10px;
       background-color:#000;
       border-radius: 4px;
   }
   .menu-trigger span:nth-of-type(1) {
       top: 0;
   }
   .menu-trigger span:nth-of-type(2) {
       top: 30px;
   }
   .menu-trigger span:nth-of-type(3) {
       top: 60px;
   }
   .menu-trigger.active span:nth-of-type(1) {
       -webkit-transform: translateY(30px) rotate(-45deg);
       transform: translateY(30px) rotate(-45deg);
   }
   .menu-trigger.active span:nth-of-type(3) {
       -webkit-transform: translateY(30px) rotate(45deg);
       transform: translateY(-30px) rotate(45deg);
   }
}
@media screen and (min-width: 0px) and (max-width: 480px) {
   .menu-trigger {
       position: relative;
       width: 100px;
       height: 60px;
       z-index:10001;
   }
   .menu-trigger span {
       position: absolute;
       left: 0;
       width: 200px;
       height: 10px;
       background-color: #000;
       border-radius: 4px;
   }
   .menu-trigger span:nth-of-type(1) {
       top: 0;
   }
   .menu-trigger span:nth-of-type(2) {
       top: 30px;
   }
   .menu-trigger span:nth-of-type(3) {
       top: 60px;
   }
   .menu-trigger.active span:nth-of-type(1) {
       -webkit-transform: translateY(30px) rotate(-45deg);
       transform: translateY(30px) rotate(-45deg);
   }
   .menu-trigger.active span:nth-of-type(3) {
       -webkit-transform: translateY(30px) rotate(45deg);
       transform: translateY(-30px) rotate(45deg);
   }
}
```
HTML
```ここに言語を入力
                   <ul>
                       <a class="menu-trigger" id="checker">
                           <span></span>
                           <span></span>
                           <span></span>
                       </a>
                   </ul>
```
最初ですが、
@media screen and (min-width: 0px) and (max-width: 480px)
とdiviceを記述していなかったのですが、
@media screen and (min-device-width: 0px) and (max-device-width: 480px)
と記述することで大きさはスマホの向きを変えることで表示がかわりました。
しかし、時折CSSが変更されず、縦向き表示のmenu-trigger spanが横向きにした際でも縦向きの状態ということがあり、@media screenが効きません。
なにかいい解決方法はあるでしょうか。
追記
jQuery内で-webkit-transformを変化させようとしましたが、-があるためエラーがでて反応しませんでした。
もし、jQueryで-webkit-transformを変化させることができるようでしたら、そちらを教えていただきたいです。
よろしくお願いします。
よろしくお願いします。
![イメージ説明](ba282c33f47bafdedc1a688e9ad62bb9.jpeg)
  • JavaScript

    25727 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    10268 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    10033 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • レスポンシブWebデザイン

    376 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る