- pc适配:
1.采用百分和css3的媒体查询进行适配, 实际的宽度高度(单位:%)=实际宽度或者高度 / 屏幕分辨率宽(1920)* 100%
2.vw单位慢慢开始得到浏览器的支持,实际宽度高度(单位:vw)=实际宽度高度/屏幕分辨率宽(1920)*100%
3.媒体查询,给不同分辨率设置单独的样式
在某公司写一个主系统pc端的后台管理系统的时候,就遇到适配问题。一开始我认为只能通过媒体查询,为对应分辨率的电脑写一套相关的样式,后来在别人的项目中发现,使用栅格布局的同时,另外一些整体结构布局可使用vw或者%的方式去设置宽高。全局的字体大小同时也使用vw或者%进行设置,页面结构布局的padding和margin值也是使用vw或者%进行设置,这样就不用使用媒体查询对不同分辨率的样式进行处理。
但是值得注意一点是,vw本身是有兼容性的,如果需要考虑到兼容性,可以使用%进行替代。当然有一些细节部分不适合使用vw或者%进行处理的时候,就需要时使用媒体查询进行设置了。
- 移动端适配:
1.使用手淘js进行设配,也可以自己写js进行适配
2.给html字体大小设置为13.3333vw 实际的宽度高度(单位rem)=实际的宽度高度/100
关于移动端适配的问题,我认为会更加简单,实现的方式也是很多,可以根据自己的习惯选择一款你认为简单又实用的方式进行适配就可以了。