分享less响应式布局方案
Less是一种动态样式语言,它扩展了CSS3,增加了变量、混合(mixin)、函数等功能。在响应式布局中,我们可以使用Less来编写更加简洁、易于维护的代码。例如,我们可以使用媒体查询来根据不同的屏幕尺寸设置不同的样式,或者使用栅格系统来实现自适应布局。此外,我们还可以使用Less提供的其他功能来优化我们的代码,例如使用变量来避免重复编写相同的代码,或者使用混合来创建可复用的组件。总之,Less是一种非常强大的工具,可以帮助我们更好地实现响应式布局。
分享一套作用的less响应式布局方案,因为less不支持函数方法,所以只能使用计算方法,来实现自动换算终端分辨率比例的功能,下面这套是菜鸡源码自用的方案,分享给大家。
//默认大小,放在最上面html{font-size:50px;}//我们此次定义的划分的份数为15@no:15;//320@mediascreenand(min-width:320px){html{font-size:320px/@no;}}//360@mediascreenand(min-width:360px){html{font-size:360px/@no;}}//375iphone678@mediascreenand(min-width:375px){html{font-size:375px/@no;}}//384@mediascreenand(min-width:384px){html{font-size:384px/@no;}}//400@mediascreenand(min-width:400px){html{font-size:400px/@no;}}//414@mediascreenand(min-width:414px){html{font-size:414px/@no;}}//424@mediascreenand(min-width:424px){html{font-size:424px/@no;}}//480@mediascreenand(min-width:480px){html{font-size:480px/@no;}}//540@mediascreenand(min-width:540px){html{font-size:540px/@no;}}//720@mediascreenand(min-width:720px){html{font-size:720px/@no;}}//750@mediascreenand(min-width:750px){html{font-size:750px/@no;}}