どのようにズームの影響を受けずにすべてのHTML Webページに配置するには？

Question

私はHTMLとCSSの専門家ではありません。私はウェブページを作成するために最善を尽くしました。しかし、ズームしながらそれは壊れているようです。ロゴと言語の切り替えだけが壊れています。これを修正する方法を知らない。誰も私にこの問題を解決する方法を教えてもらえますか？ これは私のウェブページのリンクです：corailhelico.com

Answer 1

あなたのケースでは、ロゴと言語スイッチャーのヘッダーがあります。

私は、ロゴと言語divでヘッダdivを使用しましたwith flex。

Ps：整列要素に"450px"のようにpxでマージンを使用しないでください。responsive at allではありません。

フレックスガイド：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html, body { 
 
    min-height:100%; 
 
    height:100%; 
 
} 
 

 
body { 
 
    display:flex; 
 
    flex-direction:column; 
 
    margin:0; 
 
} 
 

 
.header { 
 
    height:80px; 
 
    background:#f5f5f5; 
 
    align-items:center; 
 
    display:flex; 
 
    padding:0 10px; 
 
} 
 

 
.header .logo { 
 
    display:flex; 
 
    margin:auto; 
 
} 
 

 
.header img { 
 
    width:180px; 
 
    height:50px; 
 
} 
 

 
.header .language { 
 
    margin:0 0 auto 15px; 
 
}

<div class="header"> 
 
    <div class="logo"> 
 
    <div class="image"> 
 
     <img src="http://www.corailhelico.com/images/corail-logo.jpg"> 
 
    </div> 
 
    <div class="language">Language</div> 
 
    </div> 
 
</div>