关于web前端最头疼的适配问题

  • 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

关于移动端适配的问题,我认为会更加简单,实现的方式也是很多,可以根据自己的习惯选择一款你认为简单又实用的方式进行适配就可以了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值