web屏幕适配的解决方案

web屏幕适配的解决方案

PC端：

屏幕特点：1.屏幕大小一般是大于 13.3英寸；2.用户会经常拖拉浏览器的大小
适配方案：版心布局(当屏幕大于版心宽度时，版心居中显示当屏幕小于版心宽度时，屏幕出现一个横向的滚动条，这种方案几乎所有的PC端网站都在采用)
不建议方案：百分比布局|流式布局(因为浏览器的大小经常会被改变，百分比布局会让页面很难看)
实现范例：

* { margin: 0; padding: 0; box-sizing: border-box; }
html,body{ height: 100%; background-color: #ccc; }
.main{ width: 1200px; height: 100%; margin: 0 auto; font-size: 40px; background-color: pink; }

移动端：

屏幕特点：1.屏幕相较于pc端小；2.屏幕大小比较固定
适配方案：流式布局(也叫做百分比布局，指的是页面上大部分的容器和元素的宽度都不是定死的，可能是百分比单位，也可能是REM单位)
实现范例：
普通的图片和容器，写单位的时候换成 百分比 或者 flex即可。
对于页面中的某些元素，如字体大小，可以使用 淘宝 flexibile + rem 的解决方案

响应式布局：

1.前端响应式布局：

Flex布局；media媒体布局 @media screen and (max-width:800px){...}

2.后端响应式布局

后台服务器根据前端浏览器的User-Agent来判断来源请求是PC端还是移动端，然后服务器动态返回PC端页面或者移动端页面。nginx中很容易就出现该功能。京东，天猫，淘宝也是这样子的。