PC端和移动端的区别到底在哪,为什么总有人搞错两者的区别

 PC端的特点:

PC端有固定的版心,而且屏幕很大

还有很多的兼容性

移动端的特点:

设备的宽度就是页面的宽度

还不用考虑兼容性,可以放心的使用css的新特性

物理分辨率和逻辑分辨率:

物理分辨率:

硬件所支持的,屏幕出厂就无法改变

逻辑分辨率:

软件可以达到的,前段开发中写的就是逻辑分辨率

视口 

视口( viewport) 就是浏览器显示页面的屏幕区域

视口的分类:

1布局视口:ios Android基本上都将视口分辨率设为980像素

2视觉视口:用户看到的区域

3理想视口:使用的设备有多宽,所展示的页面就有多宽

视口标签

有了视口标签,就可以达到我们的理想视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

• width=device-width：视口宽度=设备宽度

• initial-scale=1.0：初始页面缩放倍数

• maximum-scale=1.0 最大缩放倍数

• user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放

二倍图

二倍图的存在就是为了让图片更加的清晰

1:网页美工的设计稿一般都是750px

2:前段工程师拿到设计稿利用软件选择2x,进行缩小一半,按照提示的单位开发即可

flex布局

flex极大的提高了我们布局的效率,更加的简洁和灵活

 display: flex要给父盒子加

主轴的对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

1. 两侧没缝隙是 between

2. 缝隙一样大是 evenly

3. 2倍缝隙是 around

最常用的是space-between

侧轴的对齐方式

属性值	作用
flex-start	起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

重点记住,center可以让元素垂直居中

align-items: center;

伸缩比

将一个父盒子分成几份,每个盒子分成几份

flex:1;

一定要给子盒子加

分配父盒子剩余的空间

圣杯布局

圣杯布局就是左右两边大小固定不变,中间的宽度自适应,一般这种布局适用于各种移动端的顶部搜索部分

核心思路:

1两侧的盒子写固定大小

2中间的盒子flex:1; 占满剩余空间

.top {
    display: flex;
    justify-content: c;
}

.top div:first-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:last-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:nth-child(2) {
    flex: 1;
    height: 50px;
    background-color: pink;
}

flex:1; 和width有冲突,浏览器会优先执行flex:1;

总之在flex里,标签不在分类,简单的说就是没有块元素,行内元素和行内块元素,任何一个元素都可以直接设置宽高

flex基本上不脱标,也就是说淘汰了浮动

如果写pc端还有兼容性的问题,移动端的话不用考虑,直接使用flex