#javascript #html #css #vue.js #bootstrap-4
#javascript #HTML #css #vue.js #bootstrap-4
Вопрос:
Я использую Vue.js чтобы сделать целевую страницу для моего проекта, она выглядит довольно хорошо на больших экранах, но ужасно на планшетах и смартфонах. Я пытался следовать всем инструкциям в документации по начальной загрузке, чтобы получить наилучший возможный результат, но я полностью потерялся на маленьком экране. Как я могу изменить ее, чтобы она отображалась правильно и чисто на маленьких экранах?
<template>
<div class="container-fluid m-0 p-0">
<nav class="navbar navbar-expand-lg navbar-custom">
<a class="navbar-brand " href="http://exaple.com/">
<img src="../assets/logo.png" width="40" height="40" class="d-inline-block align-top" alt="">
example.com
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#sigUP" style="color:white;">Signin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mission" style="color:white;">Mission</a>
</li>
</ul>
</div>
</nav>
<div id="home-page" class="full-height p-4">
<div class="container pt-500">
<div class="row pb-6 pt-20">
<div class="col-lg-6 my-auto ">
<div class="text-right text-down mb-3 d-block d-lg-none">
<h1 class ="text-color text-right text-down">Hello,</h1>
<h1 class="display-1 text-color text-right text-down">Betatester!</h1>
</div>
</div>
<div class="col-lg-6 my-auto pt-6">
<div class="text-right text-down mb-3 d-none d-lg-block">
<h1 class ="text-color text-right text-down">Hello,</h1>
<h1 class="display-1 text-color text-right text-down" >Betatester!</h1>
</div>
</div>
</div>
</div>
</div>
<div id="about" class="bg-light p-3 p-md-5">
<h1 class="display-1 text-color-about text-center" >example.com is </h1>
<div class="row">
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-left" >
the socialnetwork for you
</h1>
<h1 class="ml-md-4 mr-md-4 text-left text-color-about_p" >Freetime</h1>
<img src="../assets/exam1.png" height="100">
<img src="../assets/exam1.png" height="100">
<img src="../assets/exam1.png" height="100">
</div>
<div class="col-lg">
<img src="../assets/about.png" height="300" class="m-4">
</div>
</div>
</div>
<div id="marketplace" class=" p-4">
<div class="row">
<div class="col-lg">
<img src="../assets/marketplace.png" height="400">
</div>
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-right" >
<h1 class="ml-md-4 mr-md-4 text-right text-color-about_m" >MARKETPLACE</h1>
where you can find all you need
</h1>
</div>
</div>
</div>
<div id="shops" class=" p-4">
<div class="row">
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-left" >
the place where you can contact your
<h1 class="ml-md-4 mr-md-4 text-left text-color-about_s p-4" >FAVORITE </h1>
<h1 class="ml-md-4 mr-md-4 text-left text-color-about_p" >STORE</h1>
</h1>
</div>
<div class="col-lg">
<img src="../assets/shop.png" height="400">
</div>
</div>
</div>
<div id="comp" class=" p-4">
<div class="row">
<div class="col-lg">
<img src="../assets/comp.png" height="400">
</div>
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-right" >
be
<h1 class="ml-md-4 mr-md-4 text-right text-color-about_m" >COMPETITIVE</h1>
blablablablablablablalbalba
</h1>
</div>
</div>
</div>
<div id="mission" class=" p-4">
<div class="row">
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-left" style="display: inline-block" >
the
<h1 class="ml-md-4 mr-md-4 text-left text-color-about_s" style="display: inline-block" > MISSION </h1>
</h1>
<h3 class="ml-md-4 mr-md-4 text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dolor neque. Vivamus id ultrices nunc. Proin vulputate iaculis tortor ac rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in lobortis diam, eu ullamcorper ante. Pellentesque sodales felis sit amet metus laoreet sodales. Proin auctor nulla vitae porta pretium. Nullam tempor blandit sem vitae finibus.
</h3>
</div>
<div class="col-lg">
<img src="../assets/mission.png" height="400">
</div>
</div>
</div>
<div id="betatest" class=" p-3">
<div class="row justify-content-center">
<div class="col-lg">
</div>
<h1 class="ml-md-0 mr-md-0 text-center display-1">
Why you'll be
<h1 class="ml-md-4 mr-md-4 text-center text-color-about_b display-1">
Betatester?
</h1>
</h1>
</div>
<div class="row ">
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-center" style="font-size: 4em;">
be<h1 class="ml-md-4 mr-md-4 text-center" style="display: inline-block; color:white;font-size: 4em;font-size: 1.2em">BETATESTER</h1> helps us to make the best experience possible on example.com
</h1>
</div>
</div>
</div>
<div id="sigUP" class=" p-2">
<div class="row justify-content-center pd-8">
<div class="col-lg pd-8">
<h1 class="ml-md-4 mr-md-4 text-center display-2">
Become
<h1 class="ml-md-4 mr-md-4 text-center text-color-about_sn display-4">
a BETATESTER
</h1>
</h1>
</div>
</div>
<div class="row justify-content-center pd-8">
<div class="col-lg ">
<img src="../assets/player.png">
<div class="row justify-content-center pd-8">
<div class="col-lg ">
<a href="/#/signupPlayer" class="btn btn-primary btn-lg btn-custom align-self-end" role="button">Player</a>
</div>
</div>
</div>
<div class="col-lg ">
<img src="../assets/store.png">
<div class="row justify-content-center pd-8">
<div class="col-lg ">
<a href="/#/signupStore" class="btn btn-primary btn-lg btn-customS " role="button">Store</a>
</div>
</div>
</div>
</div>
</div>
<div id="contact" class="p-5">
<div class="row justify-content-center mt-3 mb-3">
<div v-if="show_contact == true" class="col-lg-4" style="color:white">
<h2>Hai una domanda?</h2>
<p>Contact us!</p>
<div v-if="contact_notice != ''" class="alert alert-warning">
there's a problem. {{contact_notice}}
</div>
<form @submit.prevent="sendContactMessage()">
<div class="form-group text-left ">
<input v-model="contact_email"
type="email"
class="form-control"
placeholder="............"
>
<textarea v-model="contact_message"
class="form-control mt-3"
placeholder="..........."
rows="5"
></textarea>
</div>
<button type="submit" class="btn btn-primary">send</button>
</form>
</div>
<div v-else>
<h3>mail sent correctly!</h3>
<p>thanks for contact us!.</p>
</div>
</div>
</div>
<div id="footer" class=" p-4">
<footer class="text-light p-4">
<small>amp;copy; 2020,example</small>
</footer>
</div>
</div>
</template>
<style scoped>
#home-page {
background-color: #ff9e0b;
background: url('../assets/bg_mt.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#about {
min-height: 40vh;
}
#contact {
background-color: #252223;
}
#marketplace {
background-color: #ff9e0b;
}
#comp {
background-color: #ff9e0b;
}
#footer {
background-color: #252223;
}
#betatest {
background-color: #ff9e0b;
}
.navbar-custom {
background-color: #ff9e0b;
}
/* Modify brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: white !important;
font-size: 1.5em !important;
}
.text-color{
color:white;
font-family: 'Mountserrat',sans-serif;
font-weight: 600;
}
.text-color-about{
color:#ff9e0b;
font-family: 'Mountserrat',sans-serif;
font-weight: 600;
}
.text-color-about_p{
color:#ff9e0b;
font-family: 'Mountserrat',sans-serif;
font-weight: 800;
font-size: 4em !important;
}
.text-color-about_s{
color:#ff9e0b;
font-family: 'Mountserrat',sans-serif;
font-weight: 800;
font-size: 3em !important;
}
.text-color-about_m{
color: white;
font-family: 'Mountserrat',sans-serif;
font-weight: 600;
font-size: 3em !important;
}
.text-color-about_b{
color:white;
font-family: 'Mountserrat',sans-serif;
align-self: center;
font-weight: 800;
font-size: 2em !important;
}
.text-color-about_sn{
color:#ff9e0b;
font-family: 'Mountserrat',sans-serif;
align-self: center;
font-weight: 800;
font-size: 1em !important;
}
.bg-primary{
color:#ff9e0b;
}
.bg-imgPlayer{
contain: url(../assets/store-02.png);
}
.btn-customS{
border-radius: 1rem;
background-color: #f23838 !important;
}
.btn-custom{
border-radius: 1rem;
background-color: #ff9e0b !important;
}
</style>
Комментарии:
1. Я пытаюсь указать на то, что вы не можете на 100% полагаться на предопределенные запросы @media, особенно если у вас есть какой-либо пользовательский код на вашем веб-сайте…
Ответ №1:
Используйте запросы @media.
Точки останова встроенных загрузочных медиа-запросов находятся здесь: https://getbootstrap.com/docs/4.1/layout/overview /
Вы также можете добавить свои собственные и / или переопределить значения CSS с помощью !важно
Вам придется вручную настраивать параметры для каждого основного размера экрана, а именно для планшетов и мобильных устройств, это хорошее начало, но вы, конечно, можете доработать iPhone, Android, Google Pixels и т. Д.
Так вот как выглядит запрос @media, и вы просто помещаете в него CSS-код, специфичный для этой ширины, вот так:
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
.some-element-class {
width:85px; /* .... */
}
}
Комментарии:
1. Я новичок в html / css, поэтому, пожалуйста, извините меня за мои вопросы. Я попытался реализовать ваш код в CSS, изменив «some-element-class» на свой пользовательский класс «navbar-custom», но теперь, также в режиме большого экрана, панель навигации вырезана. Можете ли вы привести мне другой пример? Извините меня за мой запрос, но это сбивает с толку в первый раз
2. Да, вы должны использовать
max-width:вместоmin-widthЯ не обратил внимания на пример, извините 🙂