在线咨询
QQ咨询
服务热线

020-85201717

13725302004

业务微信

微信开发

TOP

响应式布局实现的代码怎么写?

发布时间:2023-02-07 浏览:

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

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


<body>

    <div id="xiangyingshi"></div>

</body>


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


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

.class{}

}


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

.class{}

}


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

.class{}

}


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

.class{}

}