优点 : 全适配 (一个HTML文件就可以适配所有的屏幕 )
缺点 : 不便于维护(响应式布局其实是把多个页面的css写在了一个HTML中,造成css代码冗余)
a.标准语法 : @media screen and (设备尺寸){ css样式 }
简写城市: @media(设备尺寸){ css样式 }
b.区间查询
设备尺寸>=区间 : @media(min-width:1200px){ css样式 }
设备尺寸<=区间 : @media(max-width:1200px){ css样式 }
c.常见的四种设备尺寸
大PC >=1200px body红色
小pc/ipad pro 992-1200px body橙色
平板(ipad) 768-992 body黄色
手机(iphne) <768 body绿色
a. 页面复杂 : 不推荐使用响应式 (电商类)
b. 页面简单 : 推荐使用响应式 (技术博客类 bootstrap官网)
(1)先写1200px的默认样式 (响应式布局以PC端为准)
(2)使用媒体查询根据设备尺寸覆盖默认样式
根据不同的屏幕尺寸加载不同的样式
全适配
:可以制作全适配的网页,就是一个网页可以同时适配PC端和移动端,而不同写两套页面。不便于维护
:需要写大量的css代码,相当于把PC端和移动端的css代码写到一个文件中,然后根据屏幕尺寸加载对应的代码。网页结构简单
:通常是专题类网站,例如一些播客专题类https://www.csdn.net/,技术专题类http://www.bootcss.com/网页结构复杂
:比如电商类(京东、淘宝、天猫),这些网站由于结构很复杂,使用响应式开发维护起来特别麻烦,反而是做两套页面分别适配PC端与移动端更方便谷歌控制台切换到移动端,然后刷新网页
@media
是css3中新增的功能,它的作用是可以针对不同的媒体类型定义不同的样式@media 媒体类型 and (媒体特征){ css样式代码 }
@media screen and (width:700px){ css样式代码}
@media screen and (max-width:700px){ css样式代码}
@media screen and (min-width:1000px) and (max-width:1200px){ css样式代码}
max-width:宽度值
min-width:宽度值
@media(max-width:700px){ css样式代码 }
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。