移动端的页面怎么来做？

kpengfang 2021-09-06 原文

移动端的页面

响应式布局开发->手机适配->一套页面在不同型号的手机上都能得到很好的体现
    1、流式布局：
    ->宽度不适应，自适应，或者用百分比设定
    ->高度、字体等都写成固定的值
    ->然后再通过@media(媒体查询)，根据不同尺寸的屏幕进行灵活的调整--2014年响应式布局思想

    2、固定式布局：(这种方式已经没人用了)
    ->设置最大的宽度值，如果屏幕的宽度超过了最大宽度，让页面在中间显示，两边留白

    3、缩放式布局：(目前做场景切换页面--常用)
    ->按照设计稿的宽高以及屏幕的宽高，我们设计出一套最适合页面缩放的比例
    ->布局的时候严格按照设计稿的尺寸进行布局
    ->然后再安装比例整体的给页面中所有的内容进行缩放

    4、FLEX(CSS3属性->在移动端的兼容不是特别好)/BOOTSTRAP(移动端框架)栅栏布局

    5、REM布局(我们目前做webApp最常用的布局思想)
    ->我们设置一个根值
    ->然后我们设定的样式值都是按照根值算出对应REM值
    ->随着页面的大小变化，浏览器会自己跟着变化