浅谈HTML布局(三)

响应式布局

meta标签的实用

设置布局宽度等于设备宽度,布局viewport等于度量viewport

meta name=”viewport” content=”width=device-width,initial-scale=1”

媒体查询

HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体,
而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性,
扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,
媒体查询中可用于检测的媒体特性有width、height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下,
为特定的一些输出设备定制显示效果。

语法

1
2
@media screen and (max-width:960px){your code}
<link rel="stylesheet" media="screen and (max-width:960px)" href='xxx.css'/>

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 响应式布局
    1. 1.0.1. meta标签的实用
  2. 1.1. 媒体查询
  3. 1.2. 语法