CSS-移动端书写的准备工作

YL0301
185 阅读4分钟

移动端书写的准备工作

移动端基础知识

一、移动端含义

即可移动的设备，比如手机、平板、kindle、电话手表等，目前做开发的时候主要针对的还是手机app界面

二、查看移动端布局

在浏览器的设备模拟器里面查看

开启设备模拟器：在浏览器界面右键->检查，点击右侧窗口中的两个小方块即可，如图

image.png

三、设备模拟器中的功能

1、iphone678------------------------手机型号

2、375*667---------------------------手机屏幕的分辨率

3、75%/100%-------------------------理解成最佳的观看比例

4、旋转的小图标------------------------切换横屏和竖屏

5、右侧区域的三个圆点------------------捕获对应的设计稿

（1）capture screenshot--------------捕获当前屏幕大小

（2）capture full size screenshot-----获取带有滚动条区域的所有的内容的设计稿

如何将PC端页面转换成移动端

1、在设备模拟器中直接刷新

2、直接访问移动端的官网，如拉勾网络，m.lagou.com

6、了解不同手机型号下面的屏幕大小

（1）iphone4========320*480

（2）iphone5========320*568

（3）iphone678======375*667

（4）iphone678s======414*736

7、了解不同屏幕下面的设计稿的大小

（1）iphone4========640*960

（2）iphone5========640*1136

（3）iphone678=======750*1334

（4）iphone678s======1242*2208

其实设计稿UI设计师给你的时候，给的都是倍图：1倍图、2倍图、3倍图

屏幕和设计稿的对比=====要么设计稿是2倍要么是3倍

设备出厂的时候人家早已经规定死了的一个数值/比值

比值/数值有一个固定的名称：设备像素比-就是一个固定的比值

8、设备像素比(dpr)

（1）定义：一个固定的比值，默认缩放为100%的情况下，为设备像素和CSS像素的比值

（2）公式：DPR = 设备像素（物理像素） / CSS像素(某一方向上)

  • 物理像素：设备像素，可以理解成你设计稿里面的尺寸大小
  • CSS像素：单位像素/虚拟像素，指的是你在编写代码的时候,给元素需要设置的宽度和高度

设备像素比中:

iphone45678-----------------手机型号中，设备像素比:2倍

iphone678s及以上------------手机型号中，设备像素比:3倍

也就相当于是:ps中测量的距离，是实际设置的大小距离的2或者3倍

（3）替换思路

CSS像素=物理像素/dpr

举例：如果我针对于iphone4做开发的时候：测量的距离大小100 * 100(物理像素)

编写代码:100/2 * 100/2===50*50

目前来看，测量的距离大小都需要除以dpr来实现设置CSS像素

9、PC端与手机端对比

（1）初始对比：

  • 700像素大小的盒子们居然能在对应的手机屏幕中完全的显示出来,还有留白
  • 设备模拟器里面还能双击放大

（2）原因：是由于他们之间的视口是不同的

  • 布局视口：指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等---即你编写的页面
  • 视觉视口：指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度
  • 理想视口：指对设备来讲最理想的视口尺寸，采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度

（3）解决视口问题：需要添加下面一段代码

理想视口
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    name="viewport"------------理想视口必须的一行代码
    content=""-----------------内容设置
        width=device-width==========设置的宽度与设备的宽度一直
        initial-scale=1.0===========初始缩放比例1.0
        minimum-scale=1.0===========最小的缩放比例为1.0
        maximum-scale=1.0===========最大的缩放比例为1.0
        user-scalable=no============不允许用户缩放

移动端布局方法

1、流式布局

2、百分比布局

3、弹性盒子布局

4、弹性盒子+rem布局（常用）

5、 rem布局

6、 vw和vh布局（常用）

7、flexble.js布局（常用）

8、响应式（常用）

移动端布局

1、确定设计稿出自于哪一个屏幕：就是为了确定dpr-设备像素比

2、根据设备像素得比值，确定CSS像素   CSS像素=物理像素/dpr

3、引入理想视口，meta标签引入

4、通过link引入icon图标，引入自己得CSS样式

5、编写代码

HTML部分
    <body>
      <header>头部</header>
      <section>主体</section>
      <footer>尾部</footer>
    </body>


CSS部分
    *{margin:0;padding:0}
    ul{list-style:none}
    img{vertival-align:middle}
    a{text-decoration:none}
    input{outline:none}  
    html,body{
      height:100%
    }
    body{
      display:flex;
      flex-direction:column
    }
avatar
文章
阅读
粉丝