php 适应手机端,4种移动端适配方法

1.@media screen实现网页布局的自适应

优点 : 无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。

官方文档：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

语法：@media mediatype and|not|only (media feature) { CSS-Code; }/* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */

h5{

color: black;

}

@media screen and (max-width: 1200px){

h5{

color: #eee;

}

}

/* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */

@media screen and (min-width: 869px) and (max-width: 900px){

h5{

color: red;

}

}

/* 屏幕宽度小于 320px 则 h5 的字体大小是20px */

@media only screen and (max-width: 320px){