このコードを書くより効率的/適切な方法は？

-2

私は最近、レスポンシブなウェブデザインについて学び、CSSでメディアクエリを使用し始めました。私は物事を敏感にし、携帯電話のためにまともに最適化する方法を理解している場所に持ってきました。このコードを書くより効率的/適切な方法は？

誰かがちょうど退屈していたり、これを見るのに興味があれば、正しい軌道に乗っているのか、それとも深刻なコーディング規則を破っているのか教えてください。 Ha。ここで

は、私が働いているものの一部です：（これは単なる背景を無視し、動かす小さな箱を参照している）

<style> 
 
    
 
    .three img { 
 
    \t position: relative; 
 
    top: 0; 
 
    } 
 
    
 
    #shoutout{ 
 
    \t position: absolute; 
 
    margin: 40% 45%; 
 
    border: 2px solid black; 
 
    background-color: white; 
 
    padding: 7% 14%; 
 
    z-index: 1; 
 
    } 
 
    
 
    .sotext p{ 
 
    \t font-size: 120%; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    } 
 
    
 
    @media screen and (max-width: 1023px){ 
 
    \t #shoutout{ 
 
     \t text-align: center; 
 
     \t font-size: 75%; 
 
     \t margin-top: 40%; 
 
    } 
 
    
 
    .sotext p{ 
 
     \t text-align: center; 
 
     \t font-size: 100%; 
 
    } 
 
    } 
 
    
 
    @media screen and (max-width: 740px){ 
 
    #shoutout{ 
 
     \t text-align: center; 
 
     \t margin-top: 35%; 
 
     \t margin-left: 45%; 
 
    } 
 
    
 
    .sotext p{ 
 
     \t text-align: center; 
 
     \t font-size: 60%; 
 
    } 
 
    } 
 
</style>

<head> 
 
    <!-- Header Placeholder--> 
 
</head> 
 

 
<body> 
 
    
 
    <div> 
 
    <section id="shoutout"> 
 
     <!-- shoutut box --> 
 
      <div class="sotext"> 
 
      <p>Placeholder Text</p> 
 
      </div> 
 
    </section> 
 
    <section class="three"> 
 
     <img  src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/575d8fed4d088eb0ab810e52/1465749487419/mother_daughter.png" alt="shoutout image" /> 
 
    </section> 
 
    </div> 
 
    
 
<body>

出典

2016-06-12 Ben

重複を削除し、.extext pが既に中央揃えになっている場合は、メディアクエリで変更される要素のみを追加し、残りは同じままです。基本的には、要素に必要なすべてのコードを基本要素に渡し、次にメディアクエリで調整する必要がある要素を調整します。 –

これは[** CodeReview **]（http://codereview.stackexchange.com/）に適していますが、投稿のガイドラインを最初に確認してください。 –

マイナーひねり

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.background { 
 
    background-image:url(http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/575d8fed4d088eb0ab810e52/1465749487419/mother_daughter.png); 
 
    background-position: center left; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#shoutout{ 
 
    \t position: absolute; 
 
    margin: 40% 45%; 
 
    border: 2px solid black; 
 
    background-color: white; 
 
    padding: 7% 14%; 
 
    z-index: 1; 
 
    } 
 
    
 
    .sotext p{ 
 
    \t font-size: 1.2em; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    } 
 
    
 
    @media screen and (max-width: 1023px){ 
 
    \t #shoutout{ 
 
     \t text-align: center; 
 
     \t font-size: 0.75em; 
 
     \t margin-top: 40%; 
 
    } 
 
    
 
    .sotext p{ 
 
     \t font-size: 1em; 
 
    } 
 
    } 
 
    
 
    @media screen and (max-width: 740px){ 
 
    #shoutout{ 
 
     \t margin-top: 35%; 
 
     \t margin-left: 45%; 
 
    } 
 
    
 
    .sotext p{ 
 
     \t font-size: 0.6em; 
 
    } 
 
    }

<div class="background"> 
 
    <section id="shoutout"> 
 
     <!-- shoutut box --> 
 
      <div class="sotext"> 
 
      <p>Placeholder Text</p> 
 
      </div> 
 
    </section> 
 
    </div>

私は個人的にimgタグの代わりにbackground-imageを使用しますが、表示の制御を少し強化します。また、フォントサイズの代わりにemsを使用します。そして、私がコメントしたところでは、複製を削除しました。

出典

2016-06-12 18:02:47

ああ、複製に気付いてくれてありがとう。私はそれをやったことが分からない。イメージを背景イメージにすることは素晴らしいアイデアです。特に私が特別なことをしているわけではないからです。 emと％の違いは何ですか？彼らはちょうど良い反応をしますか？ – Ben

個人的な好みと何よりも一般的な使用。これはすべての記事http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ –

の素晴らしい記事です。私はその記事を読んだだけで、笑。この記事は7年前のものですが、それぞれ独自のものです。 –

このコードを書くより効率的/適切な方法は？

答えて

関連する問題