pc端ui图片尺寸_聊聊PC端页面适配

目也pc端有适配的需求:目前我们pc项目的设计稿尺寸是宽度1920,高度最小是1080。适配目标:1.在不同分辨率的电脑上,网页可以正常显示2.放大或者缩小屏幕,网页可以正常显示对于宽度的适配对于宽度适配:首先设置html,body{width:100%;overflow-x:hidden;}然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于1200px),对...
摘要由CSDN通过智能技术生成

目也pc端有适配的需求:目前我们pc项目的设计稿尺寸是宽度1920,高度最小是1080。

适配目标:

1.在不同分辨率的电脑上,网页可以正常显示

2.放大或者缩小屏幕,网页可以正常显示

对于宽度的适配

对于宽度适配:

首先设置html,body{width:100%;overflow-x:hidden;}

然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于1200px),对于背景层,我们一般都要求完全铺开,主要有以下几种情况:

1.背景色为纯色:我们可以直接.box{background:#fff;width:100%;}则可以铺满

2.背景设置为背景图片:

我们有情况用.box{background: #fff url(images/01.png) no-repeat center center;width:100%;height:100px;}

有的情况需要用:.box{background: url(images/01.png) repeat left center;width:100%;height:100px;}

对于内容层我们保证我们的内容都封装在盒子内,然后margin:0 auto;保持居中显示,盒子里面的内容,我们再另外调整

对于高度的适配

一般情况下,页面都比较高,我们通过给每个模块设置具体的高度值来做页面,然后页面会出现导航条,我们可以拉动导航条来浏览,但是有的页面的需求是主体内容直接在不同的浏览器上都能完整显示,不通过导航条来浏览

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值