本文介绍了为什么在笔记本电脑和PC电脑上使用断点会得到相同的结果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的css断点不工作
我的代码：
@media only screen and (min-width: 992px) {
body{
overflow-x: hidden;
}
ul{
position: absolute; top: 0px; left: 640px;
display: inline-flex;
}
h6.f22{
left: 140px;
top:170px;
}
h2.int{
top:160px;
left: 94px;
font-size: 55px;
}
h2.int2{
top:160px;
left: 370px;
font-size: 55px;
}
p.descp{
left: 100px;
top:260px;
}
button.button{
left:130px;
top:430px;
}
div.boxed4{
height:615px;
}
div.boxed2{
height:800px;
}
footer#footer{
position: relative;
top: 363px;
}
h1.h1t{
left: 500px;
top:100px;
}
input#f1.form-control{
left:350px;
top:150px;
}
textarea#f1.form-control{
left:350px;
top:163px;
}
input.form-control.submit{
top:170px;
left:350px;
}
svg.svg-inline--fa1.fa-facebook{
left:400px;
}
svg.svg-inline--fa2{
left:430px;
}
svg.svg-inline--fa4{
left:422px;
}
.svg-inline--fa{
display:inline-flex;
padding: 0 40px 0 0;
position: relative;
left:500px; top: 35px;
height: 45px;
width: 45px;
}
}
@media only screen and (min-width: 1280px){
ul{
position: absolute; top: 0px; left: 1000px;
display: inline-flex;
}
a.nav-text{
font-size: 23px;
}
h1.title{
font-size: 30px;
position: absolute; top:10px; left: 60px;
}
h6.f22{
font-size: 18px;
}
h1.h1t{
position: relative; top: 140px; left: 850px;
}
input.form-control.submit{
top:170px;
left:691px;
}
input#f1.form-control{
left:691px;
top:150px;
}
textarea#f1.form-control{
left:691px;
top:163px;
}
.svg-inline--fa{
display:inline-flex;
padding: 0 40px 0 0;
position: relative;
left:800px; top: 35px;
}
}
推荐答案
我认为首先应该为电脑或移动设备进行设计 这是您的第一个也是主要的css
然后放置媒体查询并控制您的元素。
在此css文件中，您需要(@media only screen and (min-width: 1280px))
并且您应该将此代码放在其他代码之上
这篇关于为什么在笔记本电脑和PC电脑上使用断点会得到相同的结果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！