どんなデバイス幅でも同じ見た目になるようにするwidthの設定

前提条件：HTML/CSS
実現したいこと：レスポンシブで区切ってない範囲同士で、1200pxでも、900pxでも、
中央コンテンツのmargin:0 auto;が崩れることなく、ヘッダーがちぎれたりせず、
この画像のように表示をしたいです。
疑問点・エラーコード:

ヘッダーHTMLコード

<header> <div class="mainimage"> <div class="headercontent clearfix"> <div class="logo"> <img src="images/logo.png" alt="SNAPPERS"> </div> <nav> <ul class="navi"> <li><a href="#">Portofoio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>  <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content"><nav> <ul class="menu-bar"> <li><a href="#">Portolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav></div> </div> </div> </div> </header>

コンテンツ部分HTMLコード

<div class="wrapper"> <div class="introduce"> <h1>About</h1> <p>SNAPPERS代表、山田太郎のプロフィールや紹介ページです。</p> </div> <section> <div class="container1 clearfix"> <div class="cont-profA1"> <h2>Profile</h2> <div class="cont-profAsub"> <h3>SNAPPERS 代表：山田太郎</h3> <p>アナログ、デジタルを問わず、トイカメラやポラロイド、ビデオカメラに至るまで、あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br> 大学卒業後、有名カメラマンのアシスタントを経て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドアカメラマンとしてのスタイルを確立する。<br> 2016年に帰国し、「SNAPPERS」を設立。<br> 現在は、雑誌の表紙やカタログの撮影を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p> </div> </div> <div class="cont-profA2 "> <img src="images/about-profile.png" alt="" class="photo1"> </div> </div> </section> <section>

   <div class="container2">
    <h2>Career and job history</h2>
    <table clearfix>
      <tr>
        <th>1994年3月</th>
        <td>丸三角芸術大学写真科卒業　服部写真研究所に入社、服部英明氏に師事</td>
      </tr>
      <tr>
        <th>2002年3月</th>
        <td>服部写真研究所を退社し渡米、世界各国を放浪しながら撮影を続ける</td>
      </tr>
      <tr>
        <th>2012年8月</th>
        <td>イタリア・ミラノで開催されたコンクールにて、審査員特別賞受賞</td>
      </tr>
      <tr>
        <th>2016年1月</th>
        <td>帰国し「SNAPPERS」を設立</td>
      </tr>
      <tr>
        <th>2016年4月</th>
        <td>Aichi Musiumにて初の写真展「Snap!Snap!」を開催</td>
      </tr>
    </table>
    </div>
  </section>
</div>

フッターHTMLコード

.clearfix::after{
content: "";
display: block;
clear: both;
}
.wrapper{
width: 940px;
margin: 0 auto;
}

ヘッダーCSSコード
header{
width: 1260px;
margin: 0 auto;
}
.mainimage{
background-image: url("../images/bg-about.jpg");
width: 1260px;
height: 320px;
}
.headercontent{
width: 940px;
margin:0 auto;
}

.logo{
float: left;
margin-top:50px;
}
nav{
float: right;
}

.navi{
list-style: none;
font-size: 20px;
padding-top: 57px;
}
.navi li{
float: left;
padding-right: 20px;
font-weight: 600;
}

.navi li a{
color: white;
text-decoration: none;
}

.navi li a:visited{
color: white;
}

.navi li a:hover{
color: white;
}

/headerの中のハンバーガーメニュー/
#nav-drawer {
display: none;
position: absolute;
top: 50px;
z-index: 0;
}

/チェックボックス等は非表示に/
.nav-unshown {
display:none;
}

/アイコンのスペース/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}

/ハンバーガーアイコンをCSSだけで表現/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/線の太さ/
width: 25px;/長さ/
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}

/閉じる用の薄黒カバー/
#nav-close {
display: none;/はじめは隠しておく/
position: fixed;
z-index: 99;
top: 0;/全体に広がるように/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

/中身/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/最前面に/
width: 90%;/右側に隙間を作る（閉じるカバーを表示）/
max-width: 330px;/最大幅（調整してください）/
height: 100%;
background: #fff;/背景色/
transition: .3s ease-in-out;/滑らかに表示/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/左に隠しておく/
}

/チェックが入ったらもろもろ表示/
#nav-input:checked ~ #nav-close {
display: block;/カバーを表示/
opacity: .5;
}

#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/中身を表示（右へスライド）/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

コンテンツのCSSコード
.introduce{
margin-top: 45px;
}

h1{
border-bottom: solid 1px #cccccc;
padding-bottom: 8px;
padding-left: 5px;
}
.introduce p{
color: dimgray;
margin-top: 17px;
padding-left: 5px;
font-size: 15px;
}

/profile/
.container1{
margin-top: 20px;
width: 940px;
}

.cont-profA1{
margin-top: 20px;
width: 550px;
float: left;
}

.cont-profA2{
float: right;
width: 340px;
margin-top: 30px;
margin-left: 30px;
}

section h2{
border-left: solid 5px lightgreen;
padding-left: 10px;
line-height: 24px;
font-size: 22px;
}

section h3{
margin-top: 23px;
font-size: 15px;
width:500px;
float: left;
}

section p{
color: dimgray;
margin-top: 7.5px;
width: 550px;
font-size: 15px;
line-height: 30px;
float: left;
}

section p::first-line{
margin-top: 0;
}
/table/
.container2{
margin:70px 0;
}

.container2 h2{
margin-bottom: 25px;
}

table{
border: solid 1px #cccccc;
border-collapse: collapse;
font-size:14px;
width: 940px;
}

th{
background-color: #e8e8e8;
padding: 17px 50px;
border:solid 1px black;
}

td{
padding: 17px 40px;
border:solid 1px black;
}

.cont-table{
margin-bottom: 45px;
}

フッターのCSSコード
footer{
width: 100%;
padding: 20px;
background-color: gray;
}
#copyright{
text-align: center;
color: white;
font-size: 14px;
}

実現したいことに対して現在できていないことは、
1600pxデバイス幅の時は画像のように綺麗に表示されていますが、
900pxデバイス幅の時はヘッダーの画像がぶちぎれて、右のメニューも途切れて、
wrapperにmargin:0 auto;して中央寄せしたはずのコンテンツが左寄せになっています。
boxの配置に工夫して、widthの幅を変えることは掴んでいますが、
具体的にどうしたら良いのかがわかりません。

よろしくお願い申し上げます。

kei344

2020/07/03 02:57

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

-millmill-

2020/07/03 03:06 編集

ソースコードはコードペインに入るよう<code>をクリックして ```ここに言語を入力コード ``` ▲ のコードと書かれた部分にhtmlとcssを分けて記載してくださいまた、「widthの幅を変えることは掴んでいます」であれば、そもそも 900pxの画面巾に --------- header{ width: 1260px; margin: 0 auto; } --------- は物理的に入りません、、、

行動規範の内容に同意します

回答4件

環境が違うのですから同じように見えるはずがないと思いますが
最小大幅を想定して、そこに最小幅をベースに縦長なサイトを書けば
どのブラウザでも同じにみえるはずです
（幅広のブラウズ環境だと余白だらけになりますけど）

投稿2020/07/03 02:56

yambejp

総合スコア116724

akasa3310

2020/07/03 03:27

実はレスポンシブのブレイクポイントが640pxなので、 wrapperを940oxに設定しているものを640pxに減らせば良いのでしょうか。それでも、デバイス幅1600pxと900pxでは大きさが違いすぎるので、最小幅の641pxに背景画像を設定するとコンテンツ幅も、ヘッダーの背景画像も逆に1600pxの時の見栄えが悪くなります。

yambejp

2020/07/03 03:32

「どんなデバイス幅でも同じ見た目」なんですよね？ブレイクポイントなど場合分けをしてはいけません。 1600の幅でも640に収まるように書くのです。それがなければ「同じ見た目」にはなりません。見た目が同じで、左右にべらぼうに余白があるというのが「同じ見た目」です

yambejp

2020/07/03 04:03 編集

あとは最悪svgで組んで、列幅に合わせてsvgのサイズを変更するという考え方もあります（HTMLでという指定ですが、svgもHTMLですしね）

行動規範の内容に同意します

こんにちは。
末尾に追加してみてください。

html
1    <script>
2      function init(){ document.body.style.transform = `scale( ${document.documentElement.clientWidth / 1240} )`; }
3      init();
4      window.addEventListener('resize', init);
5    </script>

投稿2020/07/03 09:14

Lhankor_Mhy

総合スコア36960

質問への回答がありませんでしたので
画面に対して同じ比率(横幅)で表示できるような内容にしました。

ブレークポイントは不要です

width: 1260px; に以下を追加

css
1max-width: 100%;

width: 940px; に以下を追加

css
1max-width: 74.6%;

その他のwidthを指定している部分は
max-width を940pxに対する%にする
→ max-width: ●●%;

px指定の左右margin、左右paddingの単位を全て%にする
(autoはそのままでOK)

→ margin: ●●%;
→ marginは親要素(940px?)に対する%に

→ padding: ●●%;
→ paddingはその要素に対する%に

max-width、左右padding、左右marginを
全て % に変えれば
画面に対する横の配置は
画面巾に関わらず1260px以上と同じ見え方になります。

ただし
内容のテキストの改行が増える分
縦横のバランスが変わりますので
全く同じに見えるかは疑問ですが^^;;

投稿2020/07/03 06:06

編集2020/07/03 07:45

-millmill-

総合スコア676

実現したいことに対して現在できていないことは、

1600pxデバイス幅の時は画像のように綺麗に表示されていますが、
900pxデバイス幅の時はヘッダーの画像がぶちぎれて、右のメニューも途切れて、
wrapperにmargin:0 auto;して中央寄せしたはずのコンテンツが左寄せになっています。

実はレスポンシブのブレイクポイントが640pxなので、wrapperを940oxに設定しているものを640pxに減らせば良いのでしょうか。

メディアクエリーのブレークポイントを複数作ってそれぞれのサイズに最適化すれば良いのでは？

たとえば、ちょっと極端かもしれませんが...

@media screen and (max-width: 1600px) { }
@media screen and (max-width: 1024px) { }
@media screen and (max-width: 896px) { }
@media screen and (max-width: 640px) { }
@media screen and (max-width: 480px) { }

のような感じで。

投稿2020/07/03 03:36