Javascript 引导：Can'；t使页面对所有屏幕都有响应
我正在使用Vue.js为我的项目创建一个登录页，它在大屏幕上看起来很不错，但在平板电脑和智能手机上却很糟糕。我试着按照引导程序文档中的所有说明来获得尽可能好的结果，但我完全迷失在小屏幕上了。如何修改它，以便在小屏幕上正确显示和清洁Javascript 引导：Can'；t使页面对所有屏幕都有响应,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-custo
<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>© 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>
-
-
你好
贝塔斯特！
你好
贝塔斯特！
example.com是
你的社交网络
自由活动
市场
在那里你可以找到你需要的一切
您可以联系您的客户的地方
最喜欢的
贮藏
是
竞争的
布拉布拉巴尔巴
这个
使命
Lorem ipsum dolor sit amet，是一位杰出的献身者。我是多洛·内克。维瓦摩斯·艾德里克斯·努克。外阴斜颈。Lorem ipsum dolor sit amet，是一位杰出的献身者。维瓦姆斯在洛博蒂斯迪亚姆，欧盟ullamcorper ante。佩伦特斯纯碱猫坐在阿梅特梅特斯拉奥里特纯碱。无生命之门拍卖人。无需临时布朗迪特sem vitae finibus。
你为什么会这样
贝塔斯特？
beBETATESTER帮助我们在example.com上获得最佳体验
成为
白桦树
海乌娜·多曼达？
联系我们
有个问题。{{联系通知}
发送
邮件发送正确！
谢谢联系我们
&抄袭；例如，2020年
#主页{
背景色：#ff9e0b；
背景：url（'../assets/bg_mt.jpg'）无重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
#关于{
最小高度：40vh；
}
#接触{
背景色：#252223；
}
#市场{
背景色：#ff9e0b；
}
#公司{
背景色：#ff9e0b；
}
#页脚{
背景色：#252223；
}
#贝塔特{
背景色：#ff9e0b；
}
.navbar自定义{
背景色：#ff9e0b；
}
/*修改品牌和文字颜色*/
.navbar定制。navbar品牌，
.navbar自定义.navbar文本{
颜色：白色！重要；
字体大小：1.5em！重要；
}
.文字颜色{
颜色：白色；
字体系列：“Mountserrat”，无衬线；
字号：600；
}
.文字颜色关于{
颜色：#ff9e0b；
字体系列：“Mountserrat”，无衬线；
字号：600；
}
.text-color-about\p{
颜色：#ff9e0b；
字体系列：“Mountserrat”，无衬线；
字号：800；
字体大小：4em！重要；
}
.text-color-about_{
颜色：#ff9e0b；
字体系列：“Mountserrat”，无衬线；
字号：800；
字体大小：3em！重要；
}
.text-color-about\m{
颜色：白色；
字体系列：“Mountserrat”，无衬线；
字号：600；
字体大小：3em！重要；
}
.text-color-about_b{
颜色：白色；
字体系列：“Mountserrat”，无衬线；
自对准：居中；
字号：800；
字体大小：2em！重要；
}
.text-color-about\u sn{
颜色：#ff9e0b；
字体系列：“Mountserrat”，无衬线；
自对准：居中；
字号：800；
字体大小：1em！重要；
}
.bg小学{
颜色：#ff9e0b；
}
.bg imgPlayer{
包含：url（../assets/store-02.png）；
}
.btn海关{
边界半径：1em；
背景色：#f23838！重要；
}
.btn海关{
边界半径：1em；
背景色：#ff9e0b！重要；
}