堆栈内存溢出
  简体   繁体   English

如何使我的网页响应更快，而不必为每种屏幕尺寸添加媒体查询？

[英]How do I make my webpage more responsive without having to add a media query for every screen size?

 原文  2022-03-30 16:59:53  8   1    html/ css/ image/ responsive-design/ screen-size

问题描述

I have my webpage designed nicely for small phones (320px wide) and have a media query for whenever the screen size goes above tablet size (768px wide).我的网页非常适合小型手机（320px 宽），并且在屏幕尺寸超过平板电脑尺寸（768px 宽）时进行媒体查询。 Whenever the screen is in between those two sizes, however everything breaks.每当屏幕介于这两个尺寸之间时，一切都会中断。 Is there a way I can make this work and look nice without having to add a query for every screen size?有没有一种方法可以使这项工作看起来不错，而不必为每个屏幕尺寸添加查询？ I also fear that I haven't used code that will be able to be responsive very easily, but it was how I could get everything to work the way I like it.我也担心我没有使用能够非常轻松地响应的代码，但这是我如何让一切都按照我喜欢的方式工作的方式。

There is also an image at the bottom and I can't get it centered.底部还有一张图片，我无法将其居中。

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <title>Stangler Electronics</title>
        <meta name="author" content="Spencer Kooyman">
        <meta name="description" content="A basic webpage layout for future projects.">
        <meta charset="UTF-8" name="viewport" content="width=device-width, 
        initial-scale=1.0">
        <link rel="stylesheet" href="https://use.typekit.net/nsb6sac.css">
        <link rel="stylesheet" href="Test-About.css" type="text/css">
        <link rel="icon" href="Images/GreenPower.jpg" type="image/x-icon">  
    </head>
    
    <body>
        <header>
            <nav>
                <a href="Test.html" class="navbutton">Home</a>
                <a href="Test-About.html" class="active">About</a>
                <a href="Test-Contact.html" class="navbutton">Contact</a>
                <a href="Test-Stock.html" class="navbutton">Stock</a>
            </nav>

            <div class="parallax1">
                <h1>Stangler Electronics</h1>
            </div>

        </header>

        <main>
            <div class="imgandtext">
                <p class="rightoftext">Boyd purchased the business from Stevens Electronics in 2021. He f*cks with Wu-Tang MFn Killa Bees son.</p>

                <img src="Images/Pops.jpg" alt="" class="img-pops">
            </div>

            <div class="imgandtext2">
                <img src="Images/HistoricStCharles.jpg" alt="" class="img-store">

                <p class="topoftext">The store is hella old, it's been around for since like beginning times I bet.</p>
            </div>

            <div class="parallax1"></div>
        </main>
    </body>

* { box-sizing: border-box;
    margin: 0;
    padding: 0;}

:root {
    min-height: 100vh;  
    min-width: 320px;
    max-width: 1440px;
}

html {
    font-size: 23px;
    font-family: dolce, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgba(254, 176, 42, 1);
    overflow-x: hidden;
}

body {
    width: 100%;
    min-height: 100vh;
    background-color: rgba(51,51,51,1);
    position: relative;
}

header {
    margin-top: 46px;
}

nav {
    background-color: rgba(254, 176, 42, 1);
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    position: fixed;
    top: 0;
    z-index: 3;
    border-bottom: 1px solid rgba(51, 51, 51, 1);
}

a:hover {
    color: rgba(91, 121, 168, 1)
}

a.navbutton {
    font-size: 23px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
    text-decoration: none;
    padding-top: 13px;
    padding-bottom: 13px;
}

nav a.active {
    font-size: 23px;
    font-weight: 700;
    color: rgba(91, 121, 168, 1);
    text-decoration: none;
    padding-top: 13px;
    padding-bottom: 13px;
}

div.parallax1 {
    background-image: url(Images/YellowtoBlue.jpeg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 77px;
}

h1 {
    color: rgba(0, 0, 0, .7);
    text-shadow: 2px 2px 8px rgba(254, 176, 42, 1);
    font-size: 37px;
    font-family: storefront-pro, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    padding-top: 13px;
}

main {
    width: 100vw;
}

.h2-1 {
    width: 100%;
    height: 100px;
}

h2 {
    color: rgba(254, 176, 42, 1);
    text-align: center;
    font-size: 23px;
    padding: 23px 13px;
}

.parallax2 {
    background-image: url(Images/YellowtoBlue.jpeg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 25vh;
}

.imgandtext  {
    min-height: 288px;
    width: 100%;
    display: flex;
}

.img-pops {
    width: 45%;
    height: auto;
    margin: 13px 13px;
    position: absolute;
    left: 0;
    border: 3px solid rgba(37,37,37,1);
}

.rightoftext {
    position: absolute;
    width: 45%;
    text-align: left;
    right: 13px;
    padding-left: 13px;
    padding-top: 13px;
}

.imgandtext2  {
    min-height: 200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -366px;
}

.img-store {
    width: 91%;
    height: auto;
    margin: 13px 13px;
    position: absolute;
    top: 375px;
    border: 3px solid rgba(37,37,37,1);
}

.topoftext {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 313px;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 13px;
}

button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}


@media screen and (min-width: 768px) {

    html {
        font-size: 33px;
    }

    header {
        margin-top: 1px;
    }
    
    nav {
        background-color: rgba(254, 176, 42, 1);
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        position: fixed;
        top: 0;
        z-index: 3;
        border-bottom: 1px solid rgba(51, 51, 51, 1);
    }
    
    a:hover {
        color: rgba(91, 121, 168, 1)
    }
    
    a.navbutton {
        font-size: 33px;
        font-weight: 700;
        color: rgba(51, 51, 51, 1);
        text-decoration: none;
        padding-top: 13px;
        padding-bottom: 13px;
    }
    
    nav a.active {
        font-size: 33px;
        font-weight: 700;
        color: rgba(91, 121, 168, 1);
        text-decoration: none;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    h1 {
        font-size: 88px;
        margin-top: 88px;
    }

    div.parallax1 {
        height: 170px;
    }

    .imgandtext  {
        top: 33px;
        min-height: 600px;
        width: 100%;
        display: flex;
        position: relative;
    }
    
    .img-pops {
        width: 45%;
        height: auto;
        margin: 13px 13px;
        position: absolute;
        left: 0;
        border: 3px solid rgba(37,37,37,1);
    }
    
    .rightoftext {
        position: absolute;
        width: 45%;
        text-align: left;
        right: 13px;
        padding-left: 13px;
        padding-top: 13px;
    }
    
    .imgandtext2  {
        min-height: 200px;
        width: 100%;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 650px;
    }
    
    .img-store {
        width: 91%;
        height: auto;
        margin: 13px 13px;
        position: absolute;
        top: 375px;
        border: 3px solid rgba(37,37,37,1);
    }
    
    .topoftext {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 313px;
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 13px;
    }
}

1 个解决方案

解决方案1
 0  2022-03-30 19:00:32

maybe you should work with a framework... you can use bootstrap to make a grid system that auto-adjust...也许你应该使用一个框架......你可以使用引导程序来制作一个自动调整的网格系统......

Documentation about how to use the grid system有关如何使用网格系统的文档

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在不添加更多媒体查询的情况下使我的导航栏更具响应性？ - how do i make my navigation bar more responsive without added more media queries? 为什么我的媒体屏幕查询不起作用，为什么我的网站无法响应？ - Why doesn't my media screen query work, I can't make my website responsive? 我如何使我的按钮 div 在每个设备中都响应 - How do i make my button div responsive in every device 如何制作响应式网页？ - How do I make a responsive webpage? 如何使我的块引用响应不同的屏幕尺寸？ - How do i make my blockquote responsive to different screen sizes? 我必须如何更改我的代码以使其更具响应性？ - How do I have to change my code to make it more responsive? 如何使我的 web 应用程序在更改屏幕大小和所有内容时响应更快？ - How to make my web application more responsive when changing screen size and all? 如何使图像在 Django 的每个屏幕尺寸中响应 html 和 CSS？ - How to make the image responsive with html & CSS in every screen size in Django? 如何修复媒体查询以更改文本大小？ - How do I fix my media query to change text size? 如何使侧边栏显示在响应式网页的底部？ - How do I make my sidebar appear at the bottom of my responsive webpage?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM