html - 不规则的图像和字体大小 - 移动

Question

几个小问题已经折磨了我几个星期。经过多次研究和多次试验，我仍然不知道该怎么做。在我的在线简历中，桌面显示非常完美。但是在移动设备上，字体和图像大小存在许多不一致。

页面链接:t.btmx.fr

Problems

如果您知道出了什么问题，或者是否有什么我应该学习的，那将非常有帮助:)!

非常感谢!

下面是 Paulie_D 要求的代码。很抱歉，如果它太长了，我不知道要删除什么:(。首先你会找到使用媒体查询的小屏幕 CSS，然后是“普通”CSS，然后是 HTML。

@
media screen and(max - width: 1000px) {


  header {
    font - size: 1em;
  }

  p {
    font - size: 0.8em;
  }

  #
  contact_button {
    font - size: 1em;
  }


  #
  personal - info - and - topskills {
    display: flex;
    flex - direction: column;
  }

  #
  containermain {
    display: flex;
    flex - direction: column;
  }

  .topitem: nth - child(2) {
    max - width: 100 % ;
  }

  .subelementspecial /* floating logo | title */ {
    display: flex;
    flex - direction: column;
  }
}

header {
  border-radius: 0.5em;
  background-color: #AFC600;
  opacity: 0.7;
  margin: auto;
  margin-bottom: 4em;
  padding-bottom: 0.1em;
  padding-top: 0.1em;
  font-size: 0.8em;
  text-align: center;
  max-width: 1920px;
}
.bg1 {
  background: url("medias/background.jpg") no-repeat top center;
}
.bg2 {
  background: #232A2A;
}
#main-wrapper {
  width: 100%;
  background-attachment: scroll;
  background-size: contain;
  font-family: "texgyrescholaregular", Verdana, Georgia, serif;
}
#personal-info-and-topskills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-around;
  padding: 2em;
}
.topitem {
  border-radius: 0.5em;
  padding: 0 1.3em 0.6em 1.3em;
  margin: 1em;
}
.topitem h2 {
  margin-bottom: 1.5em;
}
.topitem:nth-child(2) {
  opacity: 0.9;
  min-width: 300px;
  background-color: #3D3D39;
  border-radius: 0.5em;
  /* padding : top right bottom left */
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px;
  max-width: 40em;
}
.topitem:nth-child(2) p {
  color: white;
  line-height: 2em;
}
.topitem:nth-child(2) strong {
  color: #d8616f;
}
#contact_button {
  background: #D3D699;
  text-align: center;
  color: black;
  border-radius: 1em;
  width: 40%;
  margin: auto;
  margin-bottom: 1em;
  margin-top: 1em;
}
.topitem:nth-child(3) {
  background: #C4D9D0;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 400px;
}
.topitem:nth-child(3) h2 {
  color: black
}
#languages {
  width: 100%;
}
.topitem:nth-child(4) {
  background: #e0cece;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 350px;
}
.topitem:nth-child(4) h2 {
  color: #b25960;
}
#containermain
/* contains experience, skills and education */

{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
  align-items: flex-start;
  padding: 2em;
}
.cmain-element {
  background-color: #FCF8F5;
  border-radius: 1em;
  padding: 0 1.3em 0.6em 1.3em;
  margin: 1em;
  max-width: 1500px;
  /*properties for all the childs*/
}
.cmain-element:nth-child(1) {
  flex: 1;
}
.cmain-element:nth-child(2) {
  flex: 1;
}
.float-logo-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.work-place-time h3 {
  margin-top: 0.1em;
}
.logo {
  margin-right: 30px;
}
#hobbies-passions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-around;
  align-items: flex-start;
  background-color: #FCF8F5;
  border-radius: 5px;
  width: 40em;
  margin: auto;
  margin-bottom: 3em;
}
#hobbies-img {
  text-align: center;
}
footer {
  display: flex;
  height: 60px;
  border-radius: 5px;
  background-color: #546363;
  opacity: 0.8;
  margin: auto;
  max-width: 1920px;
}
#footerbox {
  width: 40%;
  display: flex;
  margin: auto;
  justify-content: space-around;
}
@font-face {
  font-family: 'texgyrescholaregular';
  src: url('font/texgyreschola-regular-webfont.eot');
  src: url('font/texgyreschola-regular-webfont.eot?#iefix') format('embedded-opentype'), url('font/texgyreschola-regular-webfont.woff') format('woff'), url('font/texgyreschola-regular-webfont.ttf') format('truetype'), url('font/texgyreschola-regular-webfont.svg#texgyrescholaregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
h2 {
  color: #DE7F89;
  font-size: 1.5em;
  line-height: 1.5em;
}
h3 {
  font-size: 1.3em;
  line-height: 1.5em;
}
h4 {
  font-size: 1em;
  line-height: 1.5em;
}
p {
  font-size: 0.9em;
  line-height: 1.5em;
}
ol,
ul {
  font-size: 0.9em;
  line-height: 1.5em;
  /* for changing indent
	padding-left: 30px;
	*/
}
/*strong=default*/

a {
  color: green;
  text-decoration: none;
  font-style: italic;
}
a:hover {
  color: green;
}
a:active {
  color: red;
}
a:visited {
  color: purple;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="smallscreen.css" />
  <meta charset="utf-8">
  <title>Resume - Thibault Bétrémieux</title>
  <link rel="icon" href="http://t.btmx.fr/wp-content/uploads/2016/07/favicon.png">
</head>
<div class="bg2">

  <body>

    <div class="bg1">
      <div id="main-wrapper">


        <header>
          <h1>Thibault Bétrémieux - Resume as of 16<sup>th</sup> July 2016</h1>
        </header>

        <section id="personal-info-and-topskills">
          <div class="topitem">
            <p>
              <a href="medias/thibault_betremieux_photo.jpg" target=_blank>
                <img src="medias/thibault_betremieux_photo_mini.png" title="click to enlarge :) !" alt="Resume photo Thibault Bétrémieux" />
              </a>
            </p>
            <!--  <a href.../>  <Miniature/>  </a>  -->
            <!-- target=_blank open in new link -->
          </div>
          <div class="topitem">
            <h2>Personal information</h2>
            <p><strong>About me: </strong>I am a young french expat living in Germany since two years, I speak four languages (French,English,German and Italian)</p>

            <p><strong>Date of birth: </strong>24/12/1991</p>

            <p><strong>Desired position: </strong>Online marketing or management in an international environment</p>

            <p><strong>Place of residence:</strong> Bamberg, Bavaria (Germany)</p>
            <a href="http://t.btmx.fr/contact">
              <div id="contact_button">Contact me</div>
            </a>
          </div>
          <div class="topitem">
            <h2>Languages</h2>
            <div id="languages">
              <img src=medias/languages_450px.png alt="Languages">
            </div>
          </div>
          <div class="topitem">
            <h2>Computer skills</h2>
            <h3>Microsoft Office</h3>
            <ul>
              <li>Word (including Mailing)</li>
              <li>Excel (including charts and pivot tables)</li>
              <li>PowerPoint (including masks)</li>
              <li>Outlook</li>
            </ul>
            <h3>Internet</h3>
            <ul>
              <li>HTML5</li>
              <li>CSS3</li>
              <li>WordPress</li>
            </ul>
          </div>

        </section>




        <section id="containermain">
          <div class="cmain-element">
            <h2>Professional experience</h2>
            <div class="float-logo-title">
              <!-- is used to put the logo next to the title of work, place, and date-->
              <div class="logo">
                <p>
                  <img src="medias/aul_logo.png" alt="Logo Arbeit und Leben NRW" />
                </p>
              </div>
              <div class="work-place-time">
                <h3>Project manager (non renewable fixed-term contract)</h3>
                <h4><a href="http://www.aulnrw.de/en/about-us/">Arbeit und Leben NRW</a>, Düsseldorf, Germany</h4>
                <p>05.2015 - 04-2016</p>
              </div>
            </div>
            <ul>
              <li>Organization and leading of Franco-German meetings for young people in vocational training – within the Program funded by the Franco-German Youth Office (OFAJ/DJFW) “Work in the partner country”</li>
              <li>Animator of some of those meetings and training for the leading of intercultural exchanges</li>
              <li>Development of partnerships between “Arbeit und Leben NRW”, socio-political organizations and/or vocational training centers</li>
            </ul>
            <div class="float-logo-title">
              <div class="logo">
                <p>
                  <img src="medias/dialoge_logo.png" alt="Logo Dialoge Sprachinstitut" />
                </p>
              </div>
              <div class="work-place-time">
                <h3>Assistant to the school direction (Master internship)</h3>
                <h4><a href="http://www.dialoge.com/en/">Dialoge Sprachinstitut GmbH</a>, Lindau, Germany</h4>
                <p>09.2013 - 01.2014</p>
              </div>
            </div>
            <ul>
              <li>CRM</li>
              <li>Marketing: competition analysis and prospect survey research</li>
              <li>Data exploitation and creation of documents for the ISO 9001 school certification</li>
              <li>Various tasks for the school manager</li>
            </ul>

            <p>
              <img src="medias/hsbc_trinkaus_logo.png" alt="HSBC Trinkaus logo" />
            </p>
            <!-- the logo is too large for any text to stand on its side -->
            <h3>Assistant of the Team “Support to insolvency administrators” (Bachelor internship)</h3>
            <h4><a href="https://en.wikipedia.org/wiki/HSBC_Trinkaus">HSBC Trinkaus & Burkhardt AG</a> (Corporate cients), Düsseldorf, Germany</h4>
            <p>05.2012 – 08.2012</p>
            <ul>
              <li>Insight into equity backing principles, insolvency re-financing and trust accounts administration</li>
              <li>Assistance to the team for opening trust accounts and for monitoring steps of insolvency proceedings</li>
              <li>Daily queries for new insolvency cases in dedicated data bases</li>
            </ul>

          </div>

          <div class="cmain-element">
            <h2>Education</h2>
            <h3>Specialization in E-Commerce and online Marketing</h3>
            <h4><a href="http://formation.cnam.fr/">Conservatoire National des Arts et Métiers</a>, Paris (Online training), France</h4>
            <p>10.2014 - 04.2016</p>
            <ul>
              <li>“Online advertising and communication “(ESC127) - Grade: 1</li>
              <li>"E-Commerce “(ESC128) - Grade: 1</li>
              <li>“Collection and processing of digital marketing data “(ESC129) - Grade: 1</li>
              <li>“Decision-making statistics in marketing “(ESC104) - Grade: 2,2</li>
              <li>“Electronic marketing – digital marketing “(ESC123) - Grade: 1</li>
            </ul>
            <h3>Double degree: Master of Arts “Internationale Wirtschaftsbeziehungen” (International Economic Relations) – Grade 1,9</h3>
            <h4><a href="https://www.fz.uni-freiburg.de/studium/iwb">Albert-Ludwigs-Universität Freiburg</a>, Freiburg im Breisgau, Germany</h4>
            <p>10. 2012 - 09. 2014</p>
            <p><strong>Masterarbeit: “Legislative environment of the bio-food sector”</strong> (Master’s thesis, 2014, 77p.) in German.</p>
            <p>The founding texts (Codex Alimentarius and IFOAM Guidelines) and the laws of organic food; their relationships with the most famous bio private labels, internationally and in some regions and countries deeply involved in the organic food sector
              (EU, USA, Switzerland, Germany, France, Austria ...).</p>
            <h3>Double degree: Master of Arts „Commerce et Affaires internationales“ (International Business) – Grade 1,9</h3>
            <h4><a href="http://aei.u-pec.fr/">Université Paris Est Créteil (U-PEC)</a>, Créteil, France</h4>
            <p>10.2012 - 09. 2014</p>
            <p><strong>Theoretical work for preparing my internship: “Quality and training”</strong> (Sept. 2013, 35 p.) in French.</p>
            <p>EFQM (European Foundation for Quality Management) excellence model and quality management with examples relative to training. Management process of a training action, from creation to evaluation and its improvement in the context of a quality
              approach.
            </p>

            <h3>Bachelor of Arts „Commerce et Affaires Internationales“ (International Business) – Grade 1,6</h3>
            <h4><a href="http://www.u-pec.fr/pratiques/universite/formation/licence-administration-et-echanges-internationaux-aei-parcours-commerce-international-642516.kjsp">Université Paris Est Créteil (U-PEC)</a>, Créteil, France</h4>
            <p>10.2009 - 08.2012</p>
            <p>Diploma with four languages (French, English, German, Italian)</p>

            <h3>Baccalauréat</h3>
            <h4><a href="http://www.lyceedarsonval.fr/">Lycée d’Arsonval</a>, Saint Maur des Fossés</h4>
            <p>06.2009</p>
            <p>Scientific Baccalauréat in engineering sciences</p>
          </div>

        </section>

        <section id="hobbies-passions">
          <div id="hobbies-img">
            <h2>Hobbies and passions</h2>
            <p>
              <img src="medias/hobbies_passions_1.png" alt="My hobbies and passions" />
            </p>
            <p>
              <img src="medias/hobbies_passions_2.png" alt="My hobbies and passions" />
            </p>
          </div>
        </section>

        <footer>
          <div id="footerbox">
            <div class="footerelement">
              <a href="https://linkedin.com/in/thibaultbetremieux">
                <img src="medias/footer/linkedin_logo_40px.png" alt="Thibault Bétrémieux Linkedin">
              </a>
            </div>
            <div class="footerelement">
              <a href="https://www.xing.com/profile/Thibault_Betremieux">
                <img src="medias/footer/xing_logo_40px.png" alt="Thibault Bétrémieux Xing">
              </a>
            </div>
            <div class="footerelement">
              <a href="http://t.btmx.fr/category/tech">
                <img src="medias/footer/wp_articles_40px.png" alt="Thibault Bétrémieux Wordpress articles">
              </a>
            </div>
          </div>
        </footer>

      </div>
    </div>
    <!--BG1 -->
</div>
<!--BG2 -->
</body>

</html>

注意事项:

也许这会有所帮助(这是网站的结构):

i.stack.imgur.com/BEHxr.png

(我最多只能发布 2 个链接，请复制粘贴，抱歉...)

到目前为止我尝试了什么:

• 对于文本:使用小于 1000 像素的屏幕的媒体查询重新定义所有字体大小。出于某种原因，我必须为子项定义字体大小(Box-> Item -> Subitems)，因为更改 h2 或 p 等不会影响它们。我必须使用像 1.7em 这样疯狂的值才能让它们在移动设备上看起来不错。但是如果我在桌面上使用缩小的窗口(小于 1000 像素)，1.7em 看起来很大 :( !!

• 对于图像:将图像设置为 parent (如果我没记错的话)盒子的背景似乎是一个很有前途的解决方案，但是当我这样做时，图像溢出了手机上的盒子:( !我也试过将 width=100% 放在父级或子级上，但没有用。

• 其他没有任何意义的事情或者我不记得的事情:P

Answer 1

我设法通过使用以下代码来解决所有问题，该代码对页面进行了缩放:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

保重:)!