时间戳

首页 > 解决方案 > 从手机查看时样式移动

html - 从手机查看时样式移动

问题描述

我的代码在 pc 上运行良好，但是当我从手机查看此代码时有一个空白区域。有没有简单的方法来解决这个问题？

PC 视图I电话视图 (iphone X)

编辑：是的，正在移动的东西是内联的，所以它不会占用整个宽度，这就是它可能移动的原因，我如何将它们变成它们具有整个页面的宽度（我认为这会解决它）。

这是我的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico">
    <title>Matej Krajcovic portfolio</title>
   <!-- body one -->
    <link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
    <!-- heading -->
    <link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat:ital@1&family=Sacramento&display=swap" rel="stylesheet">
<!-- skuska -->
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Tangerine:wght@700&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
 
 
<body class="clear_margin">
 
<div class="clear_margin addpadding">
 
    <img class="top-cloud"src="cloud.png" alt="a cloud image">
    <h1 class="h1element">I'm Matej Krajčovič</h1>
    <p style="font-size:1.375em;"><strong>hi stackoverflowr</strong></p>
    <img class="bottom-cloud"src="cloud.png" alt="a cloud image">
    <img src="mountain.png" alt="a mountain image">
 
 
</div>
 
<!-- IMPORTED PART -->
 
<div class="middle-container">
    <div class="profile">
      <img class="profile-photo" src="download.png" alt="an image of me">
      <h2>Hello.</h2>
      <p>Im a high-school student graduating in 2024.</p>
    </div>
    <hr>
 
 
    <div class="skills">
      <h2>My Skills.</h2>
      <div class="skill-row">
        <img style="height: 10em;" class="" src="code.png" alt="a pic of a prog. reference">
 
        <ul class="no-bullets" style="position: relative;right: 2.375em;">
            <li>
                <span class="ability-title">HTML</span>
                <span class="star">★★★☆☆&lt;/span>
            </li>
            <li>
                <span class="ability-title" style="position: relative;right: 0.625em;">CSS</span>
                <span class="star">★☆☆☆☆&lt;/span>
            </li>
            <li>
                <span class="ability-title" style="position: relative;left:0.25em;">Python</span>
                <span class="star">★★★☆☆&lt;/span>
            </li>
            <li>
                <span class="ability-title"style="position:relative;right:0.5em;">Java</span>
                <span class="star">★★☆☆☆&lt;/span>
            </li>
            <li>
                <span class="ability-title"style="position:relative;left:0.3125em;">Arduino</span>
                <span class="star">★★☆☆☆&lt;/span>
            </li>
            <li>
                <span class="ability-title"style="position:relative;left:0.875em;">JavaScript</span>
                <span class="star">★☆☆☆☆&lt;/span>
            </li>
        </ul>
 
      </div>
      <div class="skill-row">
        <img class="" src="" alt="">
        <h3 style="font-size: 1.6875em;">Other skills</h3>
        <p>English (B2)</p>
      </div>
    </div>
    <hr>
 
    <div class="contact-me">
      <h2 style="font-size: 1.6875em;">Get In Touch</h2>
 
      <p>Contact me if you're interested, I offer freelance work in order to get some experience</p>     
      <a class="btn inter-link" href="mailto:mymail">CONTACT ME</a>
    </div>
  </div>
 
 
  <div class="bottom-container">
    <a class="footer-link inter-link" target="_blank" href="https://github.com/sudolake">Github‏‏‎ ‎&lt;/a>
    <a class="footer-link inter-link" target="_blank"  href="https://sudolake.github.io/CV/">‏‏‎ ‎Website</a>
    <p>© 2021 Matej Krajčovič</p>
  </div>
 
</body>
</html>
 
 
 
 
 
 <!-- CSS CODE -->
 <!-- CSS CODE -->
<!-- CSS CODE -->
 
.clear_margin{margin: 0 0 0 0;
              margin-top: 0;
              margin-block-start: 0;
              margin-block-end: 0;
 
            }
.h1element{margin-block-start: 0;
    margin-block-end: 0;
    font-family: 'Dancing Script', cursive;
    font-size: 4.6875em;
}
 
body{
    text-align: center;
    font-family: 'Merriweather', serif;}
 
 
h2{font-family:"Montserrat", sans-serif;}  
h3{font-family:"Montserrat", sans-serif;}    
.profile-photo{
 
    height: 180px;
 
}
 
 
.addpadding{
    background-color: #EAF6F6;
    position: relative;
    padding-top: 11.25em;}
 
.top-cloud{
    position: absolute;
    right: 23.75em;
    top: 5em;
    display: inline-block;
 
}
.bottom-cloud{
    position: absolute;
    left: 20.625em;
    top: 21.875em;
 
 
}
 
.no-bullets{    
    list-style-type: none;
    margin: 0em;
    padding: 0em;
    margin-right: 0.8em;
}
 
.ability-title{
    display: inline-block;
    width: 17em;
}
.star{font-size:1.5em;}
 
 
 
.inter-link:hover{color: red;}  
.inter-link{color: darkblue;}

标签： htmlcss

解决方案

我会看@media 标签

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

只需使用手机进行故障排除，看看什么最适合您

推荐阅读