どのように画面解像度

Question

に応じてウェブサイトを調整するために、私は私のウェブサイトの特定のセクションのための次のCSSがあります、私は検索何から

.menu{ 
    top:7%; 
    height: 100%; 
    left:10%; 
    bottom:10%; 
    width: 18%; 
    height: 47%; 
    z-index:1; 
    position:absolute; 
}  
.menu .star{ 
    background: url("button.png") 0% 0%/ 80% 80% no-repeat; 
    border: none; 
    width:5em; 
    height:5em; 
    padding-left:3%; 
    margin-left: 30%;  
    transition-duration:0.3s; 
    -moz-transition: 0.3s; 
    -ms-transition: background 0.3s; 
    -webkit-transition: background 0.3s; 
    -ms-transform: rotate(7deg); 
    -webkit-transform: rotate(7deg); 
    transform: rotate(7deg); 
} 

#buttonlist{ /*this is the name of the ul containing namelist,contained in .menu 
    margin-top: -90%; 
    margin-left: -20% 
} 
.namelist{ 
    text-transform: uppercase; 
    position:relative; 
    margin-left:15%; 
    margin-bottom:16%; 
    font-size: 110%; 
    font-weight:bold; 
    font-family: helvetica; 
    color:#66e0ff; 
    background-color: Transparent; 
    border:none; 
    outline:none; 
} 

をほとんどのソリューションは、「使用率」ですが、私のCSSはパーセンテージでIS私は問題が何であるか分からない。
さまざまなブラウザでサイトをテストすると、位置のずれがあります。ウェブサイトの背景も切り取られています。バックグラウンドについては、ユーザーがウィンドウサイズを変更したときに背景を調整したくないため、100％100％カバーやバックグラウンドサイズは使用しませんでした。
私の質問をまとめると、画面の解像度に合わせて配置を調整するにはどうしたらいいですか？また、背景サイズを最大ウィンドウサイズに調整して、ユーザーがウィンドウのサイズを変更したときに調整しない方法はありますか？

Answer 1

• ユーザーのサイズ変更時にバックグラウンドサイズを縮小したくない場合は、バックグラウンドにmin-widthプロパティを追加します。
• CSSを変更するにはCSS media queriesと一緒に行くことができます。パーセントを使用したとしても、スクリーンサイズに基づいて特定のルールを上書きすることはできます。
• ユーザーのサイズ変更時に背景画像が変更されないようにするには、背景をmin-width propertyに設定します。 （max-widthプロパティもあります）

このリンクをクリックすると、標準デバイスに適した寸法が得られます。お役に立てれば。 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

調整避けるために、画像の固定幅と高さを与える、とあなたは要素はウィンドウ幅に基づいて自分の幅を取る作るためにwidth of the view portvwを使用することができますも説明したようにアライメントを調整するために、あなたは、割合を使用することができます。