时间戳

首页 > 解决方案 > 页面适用于桌面，但页眉在移动设备上被截断

html - 页面适用于桌面，但页眉在移动设备上被截断

问题描述

我是新来的，我刚刚开始学习如何编码。整个页面是完全随机的，现在我在漫无边际，因为除非我添加更多细节，否则溢出不会让我发布。我创建了一个超级简单的网页，但是每当我在移动设备上加载它时，标题的右侧就会被切断。我只想将移动版本限制在我设备的边缘。

p{
    margin:20px 20px 20px 20px;
}
ul{
    position:relative;
    width:100%;
    display:inline-flex;
    /*border: 10px solid green;*/
}
li{
    list-style-type: none;
    margin: 0 auto;

}
a{
    text-align: center;
    text-decoration: none;
    color:rgba(7, 102, 7, 1);
}
body{
    background:linear-gradient(black, green);
    background-repeat:no-repeat;
    color:white;
}
html,body{
    margin:0px;
    width:100%;
    height:100%;
    padding:0px;
    overflow-x: hidden;
}
img{
    float:right;
    margin-right:50px;
}
@media screen and (max-width:992px){
    body{ 
        font-size:45px;
    }
}
<header>
    <title> Portfolio</title>
</header>
<body>
    <ul>
        <li><a href='#'>About Me</a></li>
        <li><a href='#'>Credentials</a></li>
        <li><a href='#'>Experience</a></li>
        <li><a href='#'>Why hire me</a></li>
    </ul>
    <img src="/Running/resizekitten.jpg">
    <p>
        Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer 
        purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic 
        tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed 
        pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale 
        chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.Mustard 
        sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer 
        purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic 
        tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed 
        pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale 
        chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.
    </p>
</body>

任何帮助将不胜感激！

标签： htmlcss

解决方案

首先，overflow-x: hidden;从 HTML 和正文中删除。如果内容不适合屏幕，这将切断内容。您的网站不适合移动设备的原因是您的网站没有响应。您必须使您的网站具有响应性，以便无论屏幕尺寸如何，它都看起来不错。

您必须添加媒体查询以使网站响应。这些媒体查询决定了您的网站在屏幕尺寸减小或增大时的外观。参考这里。

此外，对您的 HTML 标记进行此操作<meta name="viewport" content="width=device-width, initial-scale=1">，head因为没有此操作，您的网站将无法响应。

推荐阅读