分享
腾虎网络
2023-02-07
响应式布局实现的代码怎么写?

如何写点响应式布局的代码?

首先,我们把里面的内容写出来。


    


然后,再写响应式布局的适配代码


@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

.class{}

}


@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */

.class{}

}


@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */

.class{}

}


@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */

.class{}

}