《奇舞团特训营》课程笔记（一）——响应式设计常见方法总结

最新推荐文章于 2023-11-30 18:30:30 发布

一只自由的程序媛

最新推荐文章于 2023-11-30 18:30:30 发布

阅读量418

点赞数

分类专栏：前端小tip随笔记

本文链接：https://blog.csdn.net/weixin_37719279/article/details/84580465

版权

前端小tip随笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

viewport

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

不建议设置禁止用户缩放：user-scalable：no

图片展示

大图随容器自动缩放，保持固定高宽比

max-width:100%

背景图片

//背景图片
background-size:cover;//用于背景图片不是很重要的场合，因为图片可能被裁剪掉
background-size:contain;//用于背景图片信息比较重要的场合，不希望图片被裁剪

保持固定高宽比

<div></div>
<style>
    div{
      height:0;
      padding-top:50%;     //padding设置的是相对于父元素的宽度，这样就可以保证这是一个高宽比一定的盒子
    }
</style>

设置了高宽比一定的盒子之后，再用绝对定位的方式填充中间内容。

也可以用这个容器包裹图片，因为在响应式设计中，图片的宽度没有设定，那么在加载图片的时候可能会产生抖动，所以用高宽比固定的盒子去包裹图片可以解决这个问题。

两栏自适应布局

float与BFC

绝对定位

模拟table

flex布局

导航栏

nav{
    display:table;
}
nav a{
    display:table-cell;
}

手机里显示不下时，可以设置一个滚动处理

nav里面嵌套一个ul，设置为display：table；nav设置为over-flow：scroll；

网格布局，自动换行

inline-block+justify或者flex

ul{
    margin:0;
    padding:0;
    text-align:justify;
}

li{
    display:inline-block;
    width:30%;  //根据网页的设计需求设定。也可能是固定宽度，能排几个排几个
    height：0；
    padding-top：20%；  //固定宽高比
}

media query

针对不同屏幕，使用不同样式

<link rel='stylesheet' href='m.css' media='screen and (max-width:480px)'>

@media screen and(min-width:480px) {
  .selector {...}
}

 <nav>
        <a href="#"> Home </a>
        <a href="#"> JavaScript </a>
        <a href="#"> HTML </a>
        <a href="#"> CSS </a>
        <a href="#"> HTTP </a>
    </nav>

//css

body {
    margin: 0;
}

nav {
    display: flex;
    width: 100%;
    background: #00BCD4;
}
nav a {
    flex: 1;
    text-decoration: none;
    color: #fff;
    padding: 0 1em;
    font: normal 14px/2 HElvetica, sans-serif; 
}

nav a:not(:first-child) {
    border-left: 1px solid rgba(255,255,255,.7);
}
@media screen and (max-width: 480px) {
   nav {
    flex-direction: column;
   }
   nav a:not(:first-child) {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.7);
   }
}

字体设置rem

html {
 font-size:16px;
}
h1 {
 font-size:2rem;
}
p {
font-size: 1rem;
}

@media screen and (max-width: 1000px){
  html {
   font-size: 14px;
  }
}
@media screen and (max-width: 720px) {
    html {
      font-size:12px;
    }
  }