pc端前端页面适应不同分辨率的问题

<script  type="text/javascript">
if(window.screen.width>1427&&window.screen.width<=1920){  
   document.write("<link href='${ctx}/resources/css/party-service/party-self-building-css2.css' rel='stylesheet'>");  
}  
if(window.screen.width<=1427){  
   document.write("<link href='${ctx}/resources/css/party-service/party-self-building-css1.css' rel='stylesheet'>");  
}  

</script>


1,这里记住将此必须写在head中,这样样式才会先被加载出来,如果将此写在自己定义的js文件中,js文件写在body后面的话,样式将不会被按照预想的被显示出来

2,这种写法对于我现在的css样式中还是有问题的。注意查看自己css样式单是position是绝对定位absolute还是相对定位static,如果自己在页面中都是绝对定位的话,


这里的学时就不应该使用相对定位,如下代码显示:

@CHARSET "UTF-8";
.form-control  .unit-name-limit{
position: absolute;
    top: 0;
    right: 0;
    left:76%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}

这里的学习周期以及input输入框均用的是绝对定位,以及学时这个css一开始position也用的是绝对定位absolute,所以后面的left用百分比的形式就会导致不同分辨率的电脑显示出不一样的情况,写样式要瞻前顾后,这里根本不能用相对定位,所以也不存在适配不通分辨率电脑的问题。

正确样式应该这样写:

@CHARSET "UTF-8";
.form-control  .unit-name-limit{
position: absolute;
    top: 0;
    right: 0;
    left:580px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值