python怎么做成手机端_Python移动端页面适配四大方式

前端在制作移动端页面时，会碰到适配各种手机屏幕的问题，而且还包括平板电脑，这么多种分辨率的屏幕，如何做到适配呢？本文总结了四种方式。

一、流体布局

所谓的流体布局，就是用百分比来定义宽度，最外层容器的宽度设置为100%，就可以适配不同的屏幕，子元素按照比例来设置百分比，子元素整体的百分比之和就是100%，但是如果有子元素设置了边框，或者padding，那么整体的宽度就会大于100%，这时，我们可以将盒子的尺寸计算方式设置为从边框计算，通过设置：box-sizing:border-box，此时，盒子设置的宽度就是盒子的实际宽度，就没有这个问题了。

宽度解决了，高度如何设置呢?一般的元素，高度可以固定不变，所以在屏幕变化时，我们可以看到元素的宽度变了，高度不变，但是对于图片，如果高度不同，图片就会被拉扁，此时我们可以将图片的宽度设为100%;它的宽度就由它的父级的宽度决定，图片的高度不设置，图片就会按照宽度变化等比例放大或缩小，这是图片的特性，这样就可以做到图片的适配了。

流体布局的伪代码如下：

二、响应式布局

响应式布局，就是使用媒体查询的方式，针对不同的屏幕，对应不同的样式，但是移动端的屏幕很多种，如果要对应这么多套不同的样式，这样做也不现实，所以针对移动端，可以划分出三个屏幕宽度范围，在范围之内的࿰