CSS（层叠样式表）——7媒体查询
媒体查询
需求：写一个页面，要在各种各样的设备上运行;pc,手机,ipad;电视;
最大的区别就是分辨率的问题
火狐：
谷歌：
效果：
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css_07_media</title> <!-- pc上的屏幕特别的大,看着真清楚, 手机的屏幕小,看着不清楚,费眼,可否在手机上的时候将字体变大呢?
媒体查询 --> <style type="text/css"> body { font-size:14px; }
/* 媒体查询 */ @media (max-width: 400px) { body { font-size: 38px; } }
/* 媒体查询 */ @media (min-width:401px) and (max-width: 900px) { body { font-size: 28px; } } </style> </head> <body> <div>这是一个div</div> </body> </html> |
媒体查询是当前最流行的BootStrap框架的原理：https://v3.bootcss.com/