响应式网站设计

响应式开发原理

响应式开发就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同的设备
设备的一般划分情况如下:

  • 小于768的为超小屏幕(手机)
  • 768~992之间的为小屏设备(平板)
  • 992~1200之间的为中屏设备(桌面显示器)
  • 大于1200的为宽屏设备(大桌面显示器)

媒体查询

介绍

媒体查询(Media Query)是CSS3新语法。
主要是使用 @media 查询,可以针对不同的媒体类型定义不同的样式、针对不同的屏幕尺寸设置不同的样式

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询

posted @ 2024-06-28 10:12  songxia777  阅读(12)  评论(0编辑  收藏  举报