- {
- width: 0.6rem;
- height: 0.65rem
- }
四、使用媒体查询进行适配
一下为sass写法,比如拿到的设计稿是iPhone6,设备宽为375px.设计稿采用的像素是物理像素,二倍屏(retina)750px,所以当计算的时候要除以2.
- // REM 适配 <html>
- $designWidth:375;
- // 375px (iPhone 6)
- // 此为基准值, 与视觉设计稿 `宽度/2` 保持一致
- html {
- font-size:20px;
- }
- @media (min-width:320px){
- html{
- font-size: #{20*320PX/$designWidth} !important;
- }
- }
- @media (min-width:360px){
- html{
- font-size: #{20*360PX/$designWidth} !important;
- }
- }
- @media (min-width:375px){
- html{
- font-size:#{20*375PX/$designWidth} !important;
- }
- }
- @media (min-width:412px){
- html{
- font-size: #{20*412PX/$designWidth} !important;
- }
- }
- @media (min-width:480px){
- html{
- font-size:#{20*480PX/$designWidth} !important;
- }
- }
- @media (min-width:640px){
- html{
- font-size: #{20*640PX/$designWidth} !important;
- }
- }
- @media (min-width:720px){
- html{
- font-size:#{20*720PX/$designWidth} !important;
- }
- }
- @media (min-width:768px){
- html{
- font-size: #{20*768PX/$designWidth} !important;
- }
- }
- @media (min-width:1440px){
- html{
- font-size:#{20*1440PX/$designWidth} !important;
- }
- }
为了减少单位换算的时间,加快编写代码的效率,可以采用函数自动换算:
- @function torem($px){//$px为需要转换的字号
- @return ($px / 40) * 1rem; //40px为根字体大小
- }
因为根字体为font-size:20px,设计稿采用2倍像素表示,所以除以20*2;(如果设计稿采用设备像素及跟屏幕尺寸一样的比例,则不用除以2)
比如一个div的在设计稿上的宽度是366px,高度为239px,则直接可以这样写:
- div {
- width: torem(366);
- height: torem(239);
- }
四、图片适配问题
当项目不需要对图片要求很高的话可以直接通过宽度适配,假如需要多不同的分辨率要对图片进行更换的话,通过设备像素比实现图片更换。以下是解决办法:
- bg-image($url)
- background-image url($url + "@2x.png")
- @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)
- background-image url($url + "@3x.png")
五、具体适配实现要看设计稿给出来的模板而定。分享先到这里。
来源: http://www.cnblogs.com/superSmile/p/7818913.html