响应式布局三部曲(viewport设置、页面布局、断点设置)

响应式

一套页面适配多个终端

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式实现三步曲

1.viewport设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.页面布局(流式布局)

布局

  • 无宽布局、百分比布局
    • padding,margin四个方向都是相对于父元素的宽度进行计算
  • 浮动、定位
  • 弹性盒、弹性网格
  • 小技巧
    • calc( ) 计算函数
    • box-sizing
    • 显示隐藏(display:block,none)

图像内容

img

img{width:100%}
img{max-width:100%;}

背景图

background-size:100% auto;
background-size:auto 100%;
background-size:100% 100%;

文字内容

font-size

百分比 —— 相对于父元素的字号
em    —— 用于字号时,相对于父元素font-size计算
rem  --- 相对于html的font-size计算

line-height

百分比 ----  相对于当前元素的font-size计算
数值   ——  相对于当前元素的字号

3.断点设置(版式发生变化临界点)

原理:媒体查询

断点参考

  • 根据需求(设计稿)

  • 参考bootstrap

    超小屏幕 手机 (<768px)  
    小屏幕 平板 (≥768px)   
    中等屏幕 桌面显示器 (≥992px)   
    大屏幕 大桌面显示器 (≥1200px)
    

猜你喜欢

转载自blog.csdn.net/yangyanqin2545/article/details/110286561