PC端各分辨率适配

更新日期: 2019-03-16阅读: 7k标签: 分辨率

最近在写一个PC端的活动页面,即将完工的时候,增加了个需求,想让页面适配不同的分辨率,既然提出了这样的需求,那么我们就要去尽量满足。
之前一直写的是固定版心,然后在将容器居中,这样写的话,就导致页面在低分辨屏幕下会出现横向的滚动条,内容不能全部展示。
提出这个需求的时候脑海里闪过几个方案。


1、link media属性加载不同样式
<link href="css/test.css" media="screen and (max-device-width=1024px)"
这样写的话那么就需要每个分辨率都需要写一个样式,而且代码内容几乎一致,样式文件增多,后期需要修改的话也是一个不少的工作量。


2、transform:scale()当时脑子里也闪过这句话,
可以用js获取页面宽度,然后对元素进行缩放,这样内容也会随着缩放,但是元素所占的位置没有改变,transform会影响画布上的视觉布局,不会影响css布局本身,只是引起页面重绘。


3、rem布局
在做手机wep开发的时候,会经常用到rem。rem根据页面的根节点的字体大小进行转变。作法与手机一致,利用js动态计算页面宽度在设定根元素的字体大小。


4、css media
好在现在都是使用css预处理器来书写css,不然的话,这也是相当大的工作量。写这个的时候,是根据设计图中元素宽度在总宽度中的占比,根据比例,在不同分辨率下获得元素宽度,这样的话元素的高度无法控制,写的是max-height,内外边距和设计图上保持一致。以下是用scss写的部分

样式。
$screenWidthList: (960,1024,1280,1360,1366,1400,1600,1920,2048);
$designWidth: 1920;
@function percentToPx($width,$screenWidth){
$percent: $width/$designWidth;
@return $percent * $screenWidth * 1px;
}
@each $sw in $screenWidthList{
@media screen and (min-width: $sw*1px){

....
}
}


链接: https://www.fly63.com/article/detial/2381

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!