当宽度大小改变标题div什么是更好的解决方案?

时间:2016-05-17 11:58:26

标签: javascript jquery html css responsive-design

我有一个问题要问哪个是

宽度尺寸更改时更改标题内容的最佳方法是什么?

enter image description here

可以用php session = true来完成吗?就像当宽度小于或等于500px时,它会自动改变整个标题?或者它必须用javascript或jquery做得更好?

1 个答案:

答案 0 :(得分:1)

您应该使用媒体规则,这是您案例的更好解决方案。

@media规则用于为不同的媒体类型/设备定义不同的样式规则。

在CSS2中,这被称为媒体类型,而在CSS3中,它被称为媒体查询。 媒体查询会查看设备的功能,并可用于检查许多内容,例如:

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向(横向/纵向模式下的平板电脑/手机?)
  • 分辨率
  • 以及更多

例如,如果我们使用这样的:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

当宽度大于480px时,它会给身体赋予这种背景色。

您还可以看到此示例包含使用媒体查询在不同宽度上正常工作的菜单:https://jsfiddle.net/IA7medd/o89pn61t/