CSS——利用HTML+CSS书写移动端页面的相关知识点

文章目录

• 前言
• 一、像素与视口
• 二、移动端开发
• 三、开发工具
• 总结

---

前言

     本文主要介绍的是使用HTML+CSS书写移动端页面的相关知识点，首先要提醒小伙伴们，移动端的布局多用flex布局（关于flex布局在以往的文章有过介绍，对这一块儿的知识点不了解的同学欢迎翻阅），单位也不再使用PC端的px单位,那么应该使用什么单位，如何设置呢?请看下文：

---

一、像素与视口

1.像素

前端开发中像素要 分成两种情况讨论：    CSS像素      物理像素

屏幕的分辨率属于物理像素，CSS像素，编写网页时，我们所用为CSS像素，浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现，一个CSS像素最终由几个物理像素显示，  由浏览器决定 ，默认情况在PC 端，一个CSS 像素 =  一个物理像素

retina(视网膜屏幕)是一种显示技术，可以将更多的物理像素点压缩至1个css像素里，从而达到更高的分辨率，并提高屏幕的显示细腻度。

2.手机像素

默认情况下，移动端的网页都会将视口设置为980像素（css像素  )  以确保pc  端网页 可以在移动端正常访问，但如果网页的宽度超过了  980p网页,  移动端的浏览器会自动对网页缩放以完整显示网页 ，因此大部分网站会专门为移动端设计网页。

3.视口（viewport）

就是屏幕中用来显示网页的区域，视口： 可以分为布局视口，视觉视口，理想视口。通过查看视口的大小，来观察CSS和物理像素的比值

默认情况下

视口宽度    (CSS像素） ：1920PX      （物理像素）1920px   两者的比值为  1：1

放大两倍的情况：      (CSS像素） ：960PX      （物理像素）1920px   两者的比值为  1：2

可以通过修改视口的大小，来改变 CSS像素 和   物理像素的比值，

4.完美视口

移动端默认的视口大小是  980(CSS像素)，默认情况下，移动短的像素比就是  980/移动端宽度，编写移动端页面时，必须要确保有一个合理的像素比（通过改变视口的大小）。

每一个移动端设备在设计时都会设置一个最佳的像素比，一般我们只要将像素比设置为该值即可得到一个最佳效果。

5.设置完美视口的方法

<meta name="viewport"

 content="

width=device-width,    //视口的宽度和设备保持一致

 initial-scale=1.0"    //表示页面的初始缩放值

user-scale = no,                //是否允许用户缩放

maxinum-scale = 1.0        //最大允许缩放比例

mininum-scale = 1.0        //最小允许缩放比例

>

6.vw（viewport width）vw适配

在移动端开发时，就不能再使用px来进行布局了，vw表示的是视口的宽度（viewport width）, vw这个单位永远相当于视口宽度进行计算

网页中最小字体是12px，不能设置比12px更小的字体

100vw  =    一个视口的宽度，这个视口指的是每个移动端的视口

1vw  =    1%   视口宽度

5.3333vw   =    40px  

1rem  =   40px（设计图中的像素）

7.多倍图的概念

因上文讲述的css像素和物理像素比值不同的原因，所以采用多倍图的方式：

常见的设计图的宽度：   750px  1125px

二、移动端开发

1.开发移动端主流方法：

• 单独制作移动端页面（主流）

1. [流式布局，就是百分比布局，也称为非固定像素布局，  主要是设置宽度，max-width   min-width

2. flex弹性布局

3. rem+媒体查询布局

• 响应式页面兼容移动端（其次）

2.移动端开发几个注意点：

1. 去除默认样式，可以用 normalize.css

2. 盒子模型采用box-sizing 的属性

3. 超链接点击高亮背景的效果需要去除

3.响应式布局

 网页可以根据不同的设备或窗口大小呈现出不同的效果、关键就是媒体查询。

使用媒体查询： 

语法： @media   查询规则{ }

    媒体类型： 

   all   所有设备

   print   打印设备

   screen   带屏幕的设备

   speech   屏幕阅读器

  可以使用链接多个媒体类型，这样他们之间就是一个或的关系

 可以在媒体类型前添加一个only   表示仅仅在此设备才可生效，目的是为了兼容一些老版本浏览器

@media only screen{

       body{

      background-color: #bfa;

          }

}

媒体特性

 width:  视口的宽度

height: 视口的高度的 

min-width:   视口的最小宽度（视口大于指定宽度时生效）

max-width:  视口的最大宽度 (视口小于指定宽度时生效）

样式切换额分界点，称其为断点，也就是网页的样式会在这个点时发生变化，一般比较常用的断点下：

小于 768  超小屏幕  max-width=768px

大于768  小屏幕   min-width=768px

大于992   中型屏幕 min-width=992px

大于1200  大屏幕   min-width-1200px

@midia only screen and(min-width: 500px) and (max-width: 700px){

     body{

          background-color: #bfa;

        }

      }

(min-width: 500px) and (max-width: 700px)    屏幕宽度在500px与700px 之间生效

(min-width: 500px) , (max-width: 700px)   屏幕宽度在大于500px 或者   屏幕宽度在小于700px 生效

三、开发工具

相关插件与文档：

文档： flexable.js ——可以实现在不同移动设备下自动调整根标签的  font-size值，在网上都可以找得到。

插件：px to rem(可以自动把CSS像素转换为rem单位）在这里就以VScode  为例

配置方法：

注意: 上文提到的flexable.js的原理是把页面分成了十份，例如设计稿是750的，那么在这里就应该把值设置为75，若为390，则设置为39，即可实现与设计稿的像素单位相对应的效果，切记切记！

---

总结

    Ok,今天所要分享的内容就是这些，由于时间关系就此停笔吧，最后，依旧诚挚祝福屏幕前的你平安喜乐，健康幸福！