响应式网站可以自动适应各种设备终端，不用因为用户设备的不同而运用不同的布局，是目前网站建设的主流。新手想要实现响应式网站代码布局，可以先花10分钟看下面的简单教程。
第一步，把把框架建好，也就是把下面内容写出来。
<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{}
}
这样一个响应式网站的代码布局就写好了。再根据网站的内容添加适应的代码就可以了，是不是非常简单。
- SEO培训
- 微信扫一扫
-
- 我的微信公众号
- 微信扫一扫
-
评论