0
ウェブサイトをズームアウトすると、すべて正常に動作し、エラーのない場所に固定されたままになります。ただし、コンピュータの100％を超えてズームすると、コンテンツの一部がデフォルトで中央に移動します右に移動すると、その場所に固定されているコンテンツとの整合性が失われます。私は多くの方法でこれにアプローチしようとしましたが、物事を正しくすることはできませんでした。ので、ここでズームイン時にスタイルが乱れるのはなぜですか？
OK]をクリックして私のウェブサイトをズームアウトして、一度に何をズーム発生したとき（ズームアップ時に、写真やリンクを提供する画像を右に移動されている方法に注目してください）何が起こるかです：http://res.cloudinary.com/dbssny2ox/image/upload/v1480700334/zoom_out_1_xvl0vx.jpg http://res.cloudinary.com/dbssny2ox/image/upload/v1480700334/zoom_in_1_syodzh.jpg
そして、同じことが
そして、ここでは私のコードです...私のコードにコメントしている私のWebページの他のセクションで起こる：
/*This is the start of section 3 stylsheet. At first glance everything works fine
But I'll soon point out where my problems start...'*/
section.sec3{
\t background-color: #232323;
\t width:100%;
\t padding: 120px 0 10px 0;
}
.separador{
\t width: 150px;
\t height: 20px;
\t display: block;
\t margin: auto;
\t margin-top: 30px;
}
section.sec3 h4{
\t font-family: 'Playfair Display';
\t color: #FFF;
\t font-size: 40px;
\t text-align: center;
\t margin-top: -50px;
}
/*Okay what I've done with this property ".conteudo" was that when you zoom-out everything will stay locked in place, however it won't work when you zoom-in, in the browser above the 100% mark, and everything will move to the right instead of being aligned with the rest of my content*/
.conteudo
\t {
\t \t align-content: center;
\t }
div.conteudo{
\t width: 1500px;
\t margin: auto;
}
\t
section.sec3 img.foto_perfil{
\t display: block;
\t float: left;
\t margin-left: 297px;
\t margin-right: 20px;
}
section.sec3 p{
\t margin-top: 50px;
\t color: #fff;
\t font-size: 20px;
\t font-family: 'Lato';
}
section.sec3 p.p_2_sec3{
\t font-weight: bold;
}
/**/
/*This part right here is just for reference and it works as intended, so just ignore it*/
section.sec3 img.oqueseifazer{
\t display: block;
\t margin: auto; \t
\t margin-top: 50px;
\t padding-left: 25px;
\t width: 930px;
\t height: 27px;
}
section.sec3 div.posicao_horizontal2{
\t text-align: center;
\t margin: auto;
\t margin-top: 50px;
}
section.sec3 div#img2{
\t display: inline-block;
}
section.sec3 div img.img1{
\t margin-right: 40px;
}
section.sec3 div img.img1{
\t margin-left: 28px;
}
section.sec3 div img.img3{
\t margin-left: 40px;
}
section.sec3 div img.img4{
\t margin-left: 40px;
}
/**/
/*Okay once again the same problem happens with my image that provides a link, wich moves to the right when you zoom-in above the 100% mark*/
.conteudo2
\t {
\t \t align-content: center;
\t }
div.conteudo2{
\t width: 1500px;
\t margin: auto;
}
\t
section.sec3 img.linkpdf{
\t display: block;
\t margin-top: 50px;
\t margin-left: 297px;
\t width: 600px;
\t height: 85px;
\t margin-bottom: 50px;
}
/**/
/*Ignore this part, it's just for reference*/
section.sec4{
\t padding: 120px 0 400px 0;
\t background-color: #f7f5f5;
}
section.sec4 h5{
\t font-family: 'Playfair Display';
\t color: #000000;
\t font-size: 40px;
\t text-align: center;
\t margin-top: -50px;
}
section.sec4 div.posicao_horizontal2{
\t text-align: center;
\t margin: auto;
\t margin-top: 50px;
}
section.sec4 div#img3{
\t display: inline-block;
}
section.sec4 div img.img1{
\t width: 301px;
\t height: 741px;
}
section.sec4 div img.img2{
\t margin-left: 40px;
\t width: 301px;
\t height: 741px;
}
section.sec4 div img.img3{
\t margin-left: 40px;
\t width: 301px;
\t height: 741px;
}
section.sec4 img.pers_negocio{
\t display: block;
\t margin: auto; \t
\t margin-top: 50px;
\t width: 1022px;
\t height: 60px;
}
/*Again I resorted to use the "align-content" property, wich solved my problem when zooming out but won't work when zooming-in and once zoomed-in the whole thing will move to the right and won't stay aligned with the rest of the content*/
.conteudo3
\t {
\t \t align-content: center;
\t }
div.conteudo3{
\t width: 1500px;
\t margin: auto;
}
section.sec4 div.outros_elementos{
\t float: left;
\t margin-right: 10px;
}
section.sec4 div.negocios_extra{
\t float: left;
\t margin-left: 10px;
\t margin-top: 50px
}
section.sec4 div p.title_sec4{
\t text-transform: uppercase;
\t color: #ffa31a;
\t font-size: 22px;
\t margin-top: 50px;
\t font-weight: bold;
\t margin-right: 50px;
}
section.sec4 div p{
\t margin-top: 10px;
\t margin-left: 238px;
\t font-size: 18px;
\t font-family: 'DIN Alt', Fallback, sans-serif;
\t margin-right: 50px;
}
section.sec4 div#img4{
\t display: inline-block; \t
}
section.sec4 img.negocio_ilustracao{
\t margin-right: 20px;
\t width: 271px;
\t display: block;
\t height: 303px;
}
section.sec4 img.negocio_webdesign{
\t width: 271px;
\t display: block;
\t height: 303px;
}
/**/
/*This is last part where my problem happens in my website, this time I have a div containg onlly text and a button instead of images as the sections I've shown before, I am almost sure there is some property I should be using for my div's but I can't figure out what... */
/*same as before just ignore the begining of the section*/
section.sec5{
\t background-color: #fcb732;
\t background-image: url("images/az-subtle.png");
\t padding: 120px 0 290px 0;
}
section.sec5 h6{
\t font-family: 'Playfair Display';
\t color: #000000;
\t font-size: 40px;
\t text-align: center;
\t margin-top: -55px;
}
section.sec5 p.intro_contact{
\t margin-top: 30px;
\t font-size: 25px;
\t text-align: center;
}
/**/
/*Here starts the problem*/
section.sec5 h2{
\t font-family: 'Montserrat';
\t color: white;
\t text-transform: uppercase;
\t font-size: 22px;
}
section.sec5 p.par_contact{
\t margin-top: 15px;
\t font-family: 'Liberation Sans', Fallback, sans-serif;
\t font-weight: bold;
\t font-size: 18px;
}
section.sec5 p.email{
\t margin-top: 15px;
\t font-family: 'Liberation Sans', Fallback, sans-serif;
\t font-weight: bold;
\t font-size: 18px;
\t color: #563715;
\t text-decoration: underline;
\t }
section.sec5 div#wrapper{
\t margin-left: 290px;
\t margin-top: 30px;
}
/*I created conteudo 4 to reinforce the centering of sec5 but maybe it's better to remove it since when it is removed the whole thing will look the same (but will still have the same issue of the other sections) */
.conteudo4{
\t align-content: center;
}
div.conteudo4{
\t width: 1217px;
\t margin: auto;
}
section.sec5 div.inquerito_contactos{
\t float: left;
\t margin-right: 20px;
}
section.sec5 div.info_contactos{
\t float: left;
\t margin-left: 20px;
}
.button {
background-color: #563715;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
\t font-family: 'Montserrat';
\t text-transform: uppercase;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}<section class="sec3">
\t <h4> O Meu Trabalho </h4>
\t <img class="separador" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693261/separador_de_titulo_branco_s5kkqx.png">
\t <div class="conteudo">
\t <img class="foto_perfil" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693261/foto_perfil_hb5oao.jpg">
\t \t <p> Sempre tive o gosto em tornar as coisas que me rodeiam melhores. <br>
\t \t Desde que efetuei o meu curso de Profissional de Multimédia, já <br>
\t \t disponibilizei os meus serviços como: </p>
\t \t <p class="p_2_sec3"> + Estagiário em Leça de Palmeira na empresa "Wonder Dimension" 2 <br>
\t \t meses e uma semana;<br>
\t \t + Técnico de Multimédia desde 2015 na empresa "Tecla Virtual" em Gaia. </p>
\t \t <p> Os meus projectos já permitiram facultar imagem corporativa a <br>
\t \t algumas empresas em inicialização e já conto com um reportório, embora <br>
\t \t ainda modesto, dos meus trabalhos onde já criei: logótipos, cartazes, <br>
\t \t flyers, capas, cartões de visita, banners...<br>
\t \t Quando não estou a trabalhar gosto de aprender a tocar guitarra, ver <br>
\t \t filmes, ler livros, ouvir musica, ficar informado e estar com a família. </p>
\t </div>
<!--Everything contained in this part works as intended since everything is centered and locked into place, I won't even put the images uploaded here since this part is just for reference-->
\t <img class="oqueseifazer" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480694125/sparador_o_que_sei_fazer_lkypxq.png">
\t <div class="posicao_horizontal2">
\t \t <div id="img2"> <img class="img1" src="images/ilustrator.png"> </div>
\t \t <div id="img2"> <img class="img2" src="images/photoshop.png"> </div>
\t \t <div id="img2"> <img class="img3" src="images/dreamweaver.png"> </div>
\t \t <div id="img2"> <img class="img4" src="images/flash.png"> </div>
\t </div>
<!---->
<!--Here is when things get messy again once you zoom in above the 100% mark in the browser-->
\t <div class="conteudo2">
\t <img class="linkpdf" usemap="#linkpdfmap" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693261/link_portfolio_tnpxws.png
">
\t \t <map name="linkpdfmap">
\t \t <area shape="rect" coords="255,35,302,84" href="portfolio/portfolio.pdf" target="_blank">
\t \t </map>
\t </div> \t
</section>
<!---->
<!--Ignore the beginning of this section since it's just for reference-->
<section class="sec4">
\t <h5> Propostas de Negocio </h5>
\t <img class="separador" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/separador_de_titulo_preto_co4ztz.png
">
\t <div class="posicao_horizontal2">
\t \t <div id="img3"> <img class="img1" src="images/oferta_de_negocio_1.png"> </div>
\t \t <div id="img3"> <img class="img2" src="images/oferta_de_negocio_2.png"> </div>
\t \t <div id="img3"> <img class="img3" src="images/oferta_de_negocio_3.png"> </div>
\t </div>
\t <img class="pers_negocio" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/personalize_o_seu_negocio_cmv8ia.png">
<!---->
<!--Once again this part works when you zoom out, but will move to the right once you zoom-in above the 100% mark-->
\t <div class="conteudo3">
\t \t <div class="outros_elementos">
\t \t \t <p class="title_sec4"> Precisa <br>
\t \t \t de outros elementos? </p>
\t \t \t <p> Contacte-nos e conheça os vários <br>
\t \t \t preços e outras soluções diversas. </p>
\t \t \t <p> Quer seja no complemento do seu <br>
\t \t \t pack ou á parte, a Multimedia <br>
\t \t \t House dispõe de um amplo serviço <br>
\t \t \t de design gráfico e webdesign que <br>
\t \t \t coloca ao seu dispor. </p>
\t \t </div>
\t \t <div class="negocios_extra">
\t \t <div id="img4"> <img class="negocio_ilustracao" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/negocio_ilustracao_design_d4s5fi.png"> </div>
\t \t <div id="img4"> <img class="negocio_webdesign" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/negocio_webdesign_fhe6nk.png"> </div>
\t \t </div>
\t </div>
</section>
<!---->
<!--Ignore the beginning since it's just for reference-->
<section class="sec5">
\t <h6> Vamos Trabalhar? </h6>
\t <img class="separador" src="http://res.cloudinary.com/dbssny2ox/image/upload/v1480693348/separador_de_titulo_preto_co4ztz.png">
<p class="intro_contact"> Estou actualmente dísponível para projectos freelance.<br>
\t Se estiver interessado em trabalhar comigo, por favor entre em contacto através dos métodos<br>
\t abaixo referidos.</p>
<!---->
\t <div id="wrapper">
\t <div class="conteudo4">
\t \t <div class="inquerito_contactos">
\t \t <h2> Tem um projecto em mente ? </h2>
\t \t <p class="par_contact"> Tire um minuto do seu tempo e responda<br>
\t \t a um inquérito acerca do seu projecto.<br><br>
\t \t Após responder o inquérito, entrarei em<br>
\t \t contacto consigo o mais brevemente<br>
\t \t possível.<br>
\t \t </p>
\t \t <a target="_blank" href="typeform_multimedia_house.html" class="button"> Inquérito</a>
\t \t </div>
\t \t
\t \t <div class="info_contactos">
\t \t <h2> Entre em contacto comigo !</h2>
\t \t <p class="par_contact"> Luís Henriques </p>
\t \t <p class="par_contact"> Vila Nova de Gaia | 4400-008 </p>
\t \t <p class="par_contact"> +351 915 974 285 </p>
\t \t <a href="mailto:[email protected]"><p class="email"> [email protected] </p></a>
\t \t </div>
\t </div>
\t </div> \t
</section>
私はこの問題を解決するために何ができますか？ – Wristcutter69
いつでも検索できます。あなたの問題をキーワードにする方法を知っていれば、答えを見つけることができます。これは私がキーワード "ブラウザのズームとメディアのクエリ"に入れたもので、たくさんのものが見つかりました。 – Vcasso