跳到主要内容

媒体查询

媒体查询（media query）​

  • 通过媒体查询可以为不同的设备，不同的屏幕大小设置不同的样式
 @media 设备类型{}
    all 任意类型的设备
    screen 带有屏幕的设备
    speech 屏幕阅读器
    print 打印设备

    @media screen,print  或
    @media not screen 非
    @media (min-width:500px) and (max-width:800px) 与
    @media only screen 只

@media (min-width:500px)   
    min-width 指定最小视口，大于等于指定值时，样式生效
    max-width 指定最大视口，小于等于指定值时，样式生效

响应式布局​

  • 指网页会更具窗口大小的改变而改变
  • 响应式布局，可以使得一个页面同时在多种设备中使用，并且有一个较好的体验！降低我们的开发成本
  • 但是这种响应式页面，适合内容比较简单的页面， 如果是内容多的，布局复杂的页面还是建议pc端一套，移动端一套
  • 响应式布局主要就是借助媒体查询来实现的
  • 编写的原则
    1. 移动优先
    2. 渐进增强