'网页布局'

网站的布局方式

• PC：固定布局(固定宽度+Float+Position)
• 移动端
  • PC兑换和移动端公用一套页面结构,地址同意(wwww.liebao.cn) 例如:猎豹,华为
  • 流式布局+媒体查询 先按照传统的PC的页面去布局,再用媒体查询去单独控制元素,比如在PC端有一个导航结构叫nav,移动端的需求需要把nav给隐藏掉
    @media screen and (max-width:760){}
  • @media 媒体查询
    • 设备的类型 : screen(屏幕)||all(所有的设备)||print(打印机)
    • 连接符 : not(过滤)||only(只对某一个机型做适配)
    • 条件 ：max-width(最大宽度值) || min-width(最小宽度值)

      布局方式有三种

1. 流式布局(百分比布局 宽度,font-size margin padding line-height px/rem)
2. rem布局 只试用在移动端 默认1rem为16px ,通常修改为1rem=100px(方便计算,减少和设计稿的偏差) logo 100100—>1rem1rem
3. flexbox 弹性布局(弹性盒模型)
   • float position vertical-align 都不起作用