PC端页⾯适配
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；保持居中显⽰，盒⼦⾥⾯的内容，我们再另外调整
对于⾼度的适配
⼀般情况下，页⾯都⽐较⾼，我们通过给每个模块设置具体的⾼度值来做页⾯，然后页⾯会出现导航条，我们可以拉动导航条来浏览，但是有的页⾯的需求是主体内容直接在不同的浏览器上都能完整显⽰，不通过导航条来浏览
如何做？
1、百分⽐的应⽤
百分⽐的应⽤在于主视⾓的定位和缩放，百分⽐的取值以原设计稿的尺⼨为标准。什么意思呢？举个栗⼦，⼀个元素在原设计稿⾥，量出来距离顶部是 200px，如果写死可能是top:200px 或者margin-top:
200px，现在要转成百分⽐，那么这个值可能就是23.3%。这个值怎么算？如果设计稿是 1080，200/1080=18.51%这样计算出来百分⽐的值。
但是，有个地⽅要注意，流体布局下，百分⽐的值是根据⽗层计算的；absolute布局的元素是根据最近的relative⽗层计算的；fixed布局的元素是根据window的可视区域计算的。margin属性值可以为百分比
所以，如果要达到适配的效果，不只是当前元素需要⽤百分⽐值，其参考计算的元素也是要动态变化的。
另 外还有⼀个就是图⽚缩放的问题，pc很多主视⾓都是切图的，但是pc不能直接⽤background-size（虽然强⼤的filter兼容可以使低版本 ie⽀持，但是之前说过⽤filter都要特别⼩⼼，特别是涉及到js交互操作的，很多坑）。在pc我们可以直接通过img标签来插⼊图⽚，通过设置 img宽度为100%，⾼度auto，然后让它根据⽗层来等⽐缩放来实现（img标签实现缩放引起的另⼀个问题是该图⽚不能⽤雪碧图了，但pc的主视⾓不是很多，影响不⼤）。
2、js监测
需要js主要有两个原因：
上⾯说了，百分⽐是要有⽗层做参照物的，那么如果⽗层都⽤百分⽐，那就是最终是根据window来参
照的，因为pc绝⼤部分都是宽屏设备，⽽且他们的⽐例是不⼀致的，我们来计算下(190是减去浏览器⼯具条、window桌⾯条、我们页⾯通⽤顶条)：
设计稿：1920/(1080-190) = 2.16
14⼨普通笔记本：1366/(768-190) = 2.36
所以，我们不能宽⾼都100%按照屏幕尺⼨来计算。另外考虑到主要是⾼度对pc页⾯的主视⾓影响⽐较⼤，我们需要借助js来计算确定⼀个最⼩⾼度临界值（当然这个可以⽤css的min-height来实现）；
另外⼀个是，通过js判断最⼩⾼度临界值，再加上这个最⼩临界值的class，为了处理那些特殊的布局或者百分⽐⽆法完全解决适配的元素，⽐如字体的相关布局

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。