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要给父盒子加

主轴的对齐方式

1. 两侧没缝隙是 between

2. 缝隙一样大是 evenly

3. 2倍缝隙是 around

最常用的是space-between

侧轴的对齐方式

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

align-items: center;

伸缩比

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

flex:1;

一定要给子盒子加

分配父盒子剩余的空间

圣杯布局

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

核心思路:

1两侧的盒子写固定大小

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

1.  
   .top {
2.  
   display: flex;
3.  
   justify-content: c;
4.  
   }
5.  
    
6.  
   .top div:first-child {
7.  
   width: 50px;
8.  
   height: 50px;
9.  
   background-color: red;
10.  
    }
11.  
     
12.  
    .top div:last-child {
13.  
    width: 50px;
14.  
    height: 50px;
15.  
    background-color: red;
16.  
    }
17.  
     
18.  
    .top div:nth-child(2) {
19.  
    flex: 1;
20.  
    height: 50px;
21.  
    background-color: pink;
22.  
    }

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

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

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

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

这篇好文章是转载于：学新通技术网