像素
1.像素:
(1) 屏幕是由一个一个发光的小点构成,这一个个的小点就是像素
(2) 分辨率:1920 x 1080 说的就是屏幕中小点的数量
(3)在前端开发中像素要分成两种情况讨论:CSS像素 和 物理像素
(4) 物理像素,上述所说的小点点就属于物理像素
(5)CSS像素,编写网页时,我们所用像素都是CSS像素
① 浏览器在显示网页时,需要将CSS像素转换为物理像素然后再呈现
② 一个CSS像素最终由几个物理像素显示,由浏览器决定:
默认情况下在pc端,一个css像素 = 一个物理像素
2.视口(viewport)
(1) 视口就是屏幕中用来显示网页的区域
(2)可以通过查看视口的大小,来观察css像素和物理像素的比值
(3) 默认情况下:
视口宽度 1920px(CSS像素)
1920px(物理像素)
- 此时,css像素和物理像素的比是 1:1
(4) 放大两倍的情况:
视口宽度 960px(CSS像素)
1920px(物理像素)
- 此时,css像素和物理像素的比是1:2
(5) 我们可以通过改变视口的大小,来改变CSS像素和物理像素的比值
移动端
- 在不同的屏幕,单位像素的大小是不同的,像素越小屏幕会越清晰
24寸 1920x1080
i6 4.7寸 750 x 1334 - 智能手机的像素点 远远小于 计算机的像素点
- 默认情况下,移动端的网页都会将视口设置为980像素(css像素),以确保pc端网站都可以在移动端中正常访问,但是如果网页的宽度超过了980,移动端的浏览器会自动对网页缩放以完整显示网页
移动端页面
- 移动端默认的视口大小是980px(css像素),默认情况下,移动端的像素比就是 980/移动端宽度 (980/750)
- 如果我们直接在网页中编写移动端代码,这样在980的视口下,像素比是非常不好, 导致网页中的内容非常非常的小
编写移动页面时,必须要确保有一个比较合理的像素比:
1css像素 对应 2个物理像素
1css像素 对应 3个物理像素 - 可以通过meta标签来设置视口大小
- 每一款移动设备设计时,都会有一个最佳的像素比,一般我们只需要将像素比设置为该值即可得到一个最佳效果
- 将像素比设置为最佳像素比的视口大小我们称其为完美视口
将网页的视口设置为完美视口:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
响应式布局
响应式布局
(1)网页可以根据不同的设备或窗口大小呈现出不同的效果
(2)使用响应式布局,可以使一个网页适用于所有设备
(3)响应式布局的关键就是 媒体查询
(4)通过媒体查询,可以为不同的设备,或设备不同状态来分别设置样式
媒体查询
- 使用媒体查询
(1)语法: @media 查询规则{}
媒体类型:
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
- 可以使用,连接多个媒体类型,这样他们之间就是一个或的关系
(2)可以在媒体类型前添加一个only,表示只有。
only的使用主要是为了兼容一些老版本浏览器
@media print,screen{
body{
background-color: #bfa;
}
}
- 媒体特性:
width 视口的宽度
height 视口的高度
min-width 视口的最小宽度(视口大于指定宽度时生效)
max-width 视口的最大宽度(视口小于指定宽度时生效) - 样式切换的分界点,我们称其为断点,也就是网页样式会在这个点时发生变化
一般比较常用的断点:
小于768 超小屏幕 max-width=768px
大于768 小屏幕 min-width=768px
大于768 中型屏幕 min-width=992px
大于1200 大屏幕 min-width=1200px
@media only screen and (min-width:500px) and (max-width:700px){
body{
background-color: #bfa;
}
}
美图练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./fa/css/all.min.css">
<link rel="stylesheet" href="./meitu/style.css">
</head>
<body>
<!--
响应式设计的网页:
① 移动端优先
② 渐进增强
-->
<!-- 外部容器 -->
<div class="top-bar-wrapper">
<div class="top-bar">
<!-- 左侧菜单 -->
<div class="left-menu">
<!-- 创建菜单图标 -->
<ul class="menu-icon">
<li></li>
<li></li>
<li></li>
</ul>
<!-- 创建菜单 -->
<ul class="nav">
<li><a href="#">手机</a></li>
<li><a href="#">美容仪器</a></li>
<li><a href="#">配件</a></li>
<li><a href="#">服务支持</a></li>
<li><a href="#">企业网站</a></li>
<li>
<a href="#"><i class="fas fa-search"></i></a>
<span>搜索 Meitu.com</span>
</li>
</ul>
</div>
<!-- logo -->
<h1 class="logo">
<a href="/">美图手机</a>
</h1>
<!-- 用户信息 -->
<div class="user-info">
<a href="#">
<i class="fas fa-user"></i>
</a>
</div>
</div>
</div>
</body>
</html>
a{
text-decoration: none;
color: #fff;
&:hover{
color: rgb(197, 196, 196);
}
}
// 导航条的外部容器
.top-bar-wrapper{
background-color: #000;
}
.top-bar{
max-width: 1200px;
margin: 0 auto;
height: 48px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
// 设置左侧的导航
.left-menu{
&:active{
// 显示隐藏的菜单
.nav{
display: block;
}
}
// position: relative;
// 设置菜单
.nav{
display: none;
position: absolute;
top: 48px;
left: 0;
bottom: 0;
right: 0;
// 设置背景颜色
background-color: #000;
padding-top: 60px;
li{
width: 80%;
margin: 0 auto;
border-bottom: 1px solid #757474;
a{
display: block;
line-height: 44px;
font-size: 14px;
}
&:last-child a{
display: inline-block;
margin-right: 6px;
}
span{
color: #fff;
font-size: 14px;
}
}
}
// 图标
.menu-icon{
width: 18px;
height: 48px;
position: relative;
// 导航的线
li{
width: 18px;
height: 1px;
background-color: #fff;
position: absolute;
// 修改变形的原点
transform-origin: left center;
transition: 0.5s;
}
li:nth-child(1){
top: 18px;
}
li:nth-child(2){
top: 24px;
}
li:nth-child(3){
top: 30px;
}
// 鼠标移入以后的效果,正常项目时,效果需要通过js来实现
&:active{
li:nth-child(1){
// 向下旋转
transform: rotateZ(40deg);
}
li:nth-child(2){
// 隐藏
opacity: 0;
}
li:nth-child(3){
transform: rotateZ(-40deg);
}
}
}
}
// 设置logo
.logo{
a{
text-indent: -9999px;
display: block;
width: 122px;
height: 32px;
background-image: url('../img/18/dff63979.sprites-index@2x.png');
background-size: 400px 400px;
}
}
// 设置媒体查询
@media only screen{
// 断点 768px
@media (min-width:768px){
.left-menu{
order: 2;
flex: auto;
// 显示菜单
.nav{
display: flex;
position: static;
padding: 0;
justify-content: space-around;
li{
width: auto;
border-bottom: none;
margin: 0;
a{
line-height: 48px;
}
span{
display: none;
}
}
}
// 隐藏菜单图标
.menu-icon{
display: none;
}
}
.logo{
order: 1;
}
.user-info{
order: 3;
}
}
}