Flex(02)---像素&视口

Unit Five: 弹性盒子Flex(02)—像素&视口

1. 像素

屏幕是由一个一个发光点构成，一个发光点就是一个像素。
分辨率：1920*1080就是屏幕中发光点的数量。
CSS像素和物理像素
- 物理像素
  - 屏幕发光点（分辨率）
- CSS像素
  - 编写网页时给予的数值。
  - 浏览器在现实网页时需要将CSS像素转换为物理像素，然后再呈现。
- 一个CSS像素最终由几个物理像素显示，由浏览器决定：
  - 默认情况下，在pc端，一个CSS像素=一个物理像素。

2. 视口（Viewport）

视口就是屏幕中用来显示网页的区域。
可以通过查看视口大小来观察CSS像素和物理像素的比例。
默认情况下：
- 视口宽度：
  - CSS像素：1920px
  - 物理像素：1920px
  两者比例1：1
浏览器放大1倍：
- 视口宽度：
  - CSS像素：960px
  - 物理像素：1920px
  两者比例1：2
浏览器缩小1倍
- 视口宽度：
  - CSS像素：（1920*2）px
  - 物理像素：1920px
  两者比例2：1

3.手机像素

不同的屏幕，单位像素的大小不同，像素越小屏幕越清晰。

24寸屏幕 1920*1080
iphone 6 750*1334
智能手机的像素点远远小于计算机像素点，所以手机显示较清晰。

默认情况下，移动端的网页都会将视口像素设置为980像素（CSS像素），以确保网页可以显示全貌。

但是网页宽度超过980，移动端的浏览器会自动对网页缩放以完整显示网页。

缺点：虽然可以正常显示，但浏览体验不好，需要专门开发移动端页面。

4.完美视口

通过<meta>标签来设置视口大小。

每一款移动设备设计时，都会有一个最佳的像素比。
一般我们只需将像素比设置为该值即可得到一个最佳效果。

完美视口：

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

5. vw单位

vw（viewport width）表示视口的宽度。

100vw = 一个视口的宽度
1vw = 1%视口宽度
设计图常见宽度
- 一倍图：375px
- 两倍图：750px
- 三倍图：1125px
px和vw换算
- 两倍图：750px(设计图)=100vw(网页端)

vw适配

rem

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
注意：网页中字体大小最小是12px,不能设置一个比12像素还小的字体。如果我们设置了一个小于12px的字体，则字体自动设置为12px。
解决方案

        html{
            /* 750px(设计图)=100vw(网页端)
            1px = 0.13333vw
            10px = 1.3333vw
            100px = 13.333vw
  
             */
             /* font-size:10px */
            font-size: 1.333vw;
            -webkit-text-size-adjust:none
        }
        .box1{
            /* width:48px; */
            width: 4.8rem;
            /* height:35px; */
            height:3.5rem;
            border: 1rem solid red;
            background-color: #bfa;
        }

less解决方案

/*设置移动端屏幕大小*/
@total-width:750;
html{
    /*计算出10px=多少vw(1.3333vw)*/
    font-size: (100vw/@total-width)*10;
}
.content{
    /*693px*/
    width: 69.3rem;
}
.title{
    display:flex;
    height:17.5rem;
    justify-content:space-between;
    align-items:content;
}

6.手机端项目

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱学习</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./fa/css/all.min.css">
</head>
  
<body>
    <div class="content">
        <header class="title">
            <nav class="list"><a href="http://" target="_blank" rel="noopener noreferrer"><i
                        class="fa fa-stream"></i></a></nav>
            <h1 class="banner"><a href="http://" target="_blank" rel="noopener noreferrer">I Learn</a></h1>
            <div class="search"><a href="http://" target="_blank" rel="noopener noreferrer"><i
                        class="fa fa-search"></i></a></div>
        </header>
        <div class="pic">
            <img src="./img/front.jpg" alt="">
        </div>
        <div class="menu_btn">
            <div class="courses">
                <a href="http://" target="_blank" rel="noopener noreferrer">
                    <i class="fa fa-book-open"></i>
                    My Courses
                </a>
            </div>
            <div class="star">
                <a href="http://" target="_blank" rel="noopener noreferrer"><i class="fa fa-star"></i>
                    Star Teacher
                </a>
            </div>
            <div class="subscription">
                <a href="http://" target="_blank" rel="noopener noreferrer">
                    <i class="fa fa-bookmark"></i>
                    Subscription
                </a>
            </div>
            <div class="download">
                <a href="http://" target="_blank" rel="noopener noreferrer">
                    <i class="fa fa-download"></i>
                    My Download
                </a>
            </div>
        </div>
        <div class="course_list">
            <div class="course_title">
                <div class="course_latest">
                    <div class="bar"></div>
                    <span>Latest course</span>
                </div>
                <a href="http://" target="_blank" rel="noopener noreferrer">More +</a>
            </div>
            <div class="items_list">
                <div class="items">
                    <div class="items_content">
                        <div class="items_pics">
                            <img src="./img/annebelle.jpg" alt="">
                        </div>
                        <div class="photo_course">Photography course</div>
                        <div class="person">
                            <div class="logo">
                                <img src="./img/anlogo.png" alt="">
                            </div>
                            <div class="name">Annabelle</div>
                        </div>
                    </div>
                </div>
                <div class="items">
                    <div class="items_content">
                        <div class="items_pics">
                            <img src="./img/ham.png" alt="">
                        </div>
                        <div class="photo_course">Photography course</div>
                        <div class="person">
                            <div class="logo">
                                <img src="./img/hamlogo.png" alt="">
                            </div>
                            <div class="name">Carl Hamiltion</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

CSS

* {
  margin: 0px;
  padding: 0px;
}
html {
  font-size: 1.33333333vw;
  background-color: #eff0f4;
  text-decoration: none;
  font-style: normal;
}
.w,
.title,
.pic,
.menu_btn,
.course_list {
  width: 69.3rem;
  margin: 0 auto;
}
.title {
  display: flex;
  height: 17.5rem;
  justify-content: space-between;
  align-items: center;
}
a {
  text-decoration: none;
  font-style: normal;
  color: #24253d;
  font-size: 5rem;
}
a i {
  color: #999999;
  font-size: 4rem;
}
.pic {
  height: 27.7rem;
  overflow: hidden;
  border-radius: 1rem;
}
.pic img {
  transform: translateY(-50px);
}
.menu_btn {
  margin-top: 4rem;
  margin-bottom: 5rem;
  height: 24.5rem;
  display: flex;
  /*设置flex布局*/
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: space-between;
}
.menu_btn div {
  width: 32.7rem;
  height: 10.4rem;
  border-radius: 1rem;
}
.menu_btn div a {
  margin-left: 3rem;
  display: block;
  font-size: 2.8rem;
  line-height: 10.4rem;
  color: #ffffff;
  text-align: left;
}
.menu_btn div i {
  font-size: 3rem;
  color: #ffffff;
  margin-right: 3rem;
}
.menu_btn .courses {
  background-color: #f6755f;
}
.menu_btn .star {
  background-color: #d17afd;
}
.menu_btn .subscription {
  background-color: #fe457a;
}
.menu_btn .download {
  background-color: #1d92ff;
}
.course_list {
  height: 39rem;
}
.course_list .course_title {
  height: 6.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course_list .course_title .course_latest {
  height: 2.8rem;
}
.course_list .course_title .course_latest .bar {
  width: 0.3rem;
  height: 100%;
  background-color: #3a84ff;
  display: inline-block;
  margin-right: 1.8rem;
}
.course_list .course_title .course_latest span {
  font-size: 3rem;
}
.course_list .course_title a {
  font-size: 2rem;
  color: #656565;
}
.course_list .items_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}
.course_list .items_list .items {
  width: 32.9rem;
  height: 32rem;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.course_list .items_list .items .items_content {
  margin: 2rem 2rem;
}
.course_list .items_list .items .items_pics {
  width: 28.4rem;
  height: 15.6rem;
  overflow: hidden;
}
.course_list .items_list .items .items_pics img {
  transform: translateX(-50px) translateY(-50px);
}
.course_list .items_list .items .photo_course {
  font-size: 1rem;
  margin: 2.4rem auto;
}
.course_list .items_list .items .person {
  display: flex;
  align-items: center;
}
.course_list .items_list .items .person .logo {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 4.2rem;
  margin-right: 1.8rem;
  overflow: hidden;
}
.course_list .items_list .items .person .logo img {
  transform: translateX(-15px) translateY(-20px);
}
.course_list .items_list .items .person .name {
  font-size: 1rem;
  line-height: 4.2rem;
}
  

PREVIOUSInferential Statistics(07)-R[04]-Describing Quantitative association

NEXTFlex(01)---简介

Unit Five: 弹性盒子Flex(02)—像素&视口

1. 像素

CSS像素和物理像素

2. 视口（Viewport）

3.手机像素

4.完美视口

5. vw单位

px和vw换算

vw适配

less解决方案

6.手机端项目