登陆界面针对不同分辨率的兼容性调整(媒体查询)
借鉴于某网站的写法,网上资料很杂,很多方式屡试不爽,谷歌亲测就这个有效:(注意顺序)
在各个不同的分辨率下,不断调整使之变化的关键属性。实验得知公共的部分(即在媒体查询部分之外有公共的部分,且这些内容是在谷歌浏览器在分辨率为67%时的状态,都不在这些媒体查询之内)的内容很重要,要是改变了公共的部分需要将改变的部分分别写在对应的媒体查询范围内部,否则将牵一发而动全身,越改越乱。。。。。
@media screen and (max-width:1024px){}
@media screen and (min-width:1025px) and (max-width:1280px) {}
@media screen and (min-width:1281px) and (max-width:1440px){}
@media screen and (min-width:1441px) and (max-width:1680px){}
@media screen and (min-width:1681px) and (max-width:1920px){}
核心代码如下:
@media screen and (max-width:1024px){
.login_title {
width: 390px;
right: 12%;
}
h2.modal-title {
right: 11%;
font-size: 22px;
top: -74px;}
}
.form-horizontal .form-group{
margin-left: 11px;
margin-right: -10px;
}
@media screen and (min-width:1025px) and (max-width:1280px) {
.login_title {
width: 481px;
right: 11%;
}
.form-horizontal .form-group{
margin-left: -60px;
margin-right: -10px;
}
.login-bg .container1 .modal-dialog1{
right: -19%;
top: -15%;
}
form#loginForm{
margin-right: -16%;
margin-top: 7%;
}
h2.modal-title {
font-size: 26px;
top: -78px;
right: 12%;}
.form-horizontal .control-label2{
margin-right: -3%;
margin-left: 1%;
line-height: 1.5em;
}
.reset, .login{
width: 90px;
height: 30px;
margin-right: 11%;
}
input#showPassword{
margin-left: -212%;
}
label.remberPwd{
margin-left: -18%;
margin-top: -1%;
}
p{
margin: 48px 0 -18px 327px;
}
}
@media screen and (min-width:1281px) and (max-width:1440px){
.login_title {
width: 550px;
right: 12%;
}
.form-horizontal .control-label2{
margin-left: -2%;
margin-right: -1%;
}
.form-horizontal .form-group{
margin-left: -60px;
margin-right: -10px;
}
h2.modal-title {
font-size:33px;
right: 7%;
top: -86px;
}
.login-bg .container1 .modal-dialog1{
right: -19%;
}
.reset, .login{
margin-right: 7%;
}
label.remberPwd{
margin-left: -24%;
margin-top: -1%;
}
}
@media screen and (min-width:1441px) and (max-width:1680px){
.form-horizontal .form-group{
margin-left: -60px;
margin-right: -10px;
}
.form-horizontal .control-label2{
margin-right: -1%;
margin-left: -4%;
}
.login_title {
width: 630px;
right: 12%;
}
input#showPassword{
margin-left: -111%;
}
label.remberPwd{
margin-left: -21%;
margin-top: -2%;
}
.login-bg .container1 .modal-dialog1{
right: -18%;
top: -17%;
}
.form-horizontal .form-group{
margin-left: -20px;
margin-right: 51px;
}
.reset, .login{
width: 133px;
margin-right: 7%;
}
h2.modal-title {
font-size:35px;
top: -92px;
right: 10%;}
}
@media screen and (min-width:1681px) and (max-width:1920px){
.form-horizontal .form-group{
margin-left: -60px;
margin-right: -10px;
}
.login_title {
width: 692px;
right: 12%;
}
input#showPassword{
margin-left: -111%;
}
label.remberPwd{
margin-left: -28%;
margin-top: -2%;
}
.login-bg .container1 .modal-dialog1{
right: -19%;
top: -16%;
width: 32%;
}
.form-horizontal .control-label2{
margin-right: -11%;
margin-left: 2%;
}
p{
margin: 59px 34px -10px 442px;
}
.reset, .login{
margin-right: 13%;
width: 155px;
}
h2.modal-title {
font-size:40px;
right: 8%;
top: -97px;}
}
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/9685824.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」