前端H5中做移动端适配的方法

前端笔记

1、html中的head标签中有那些标签，作用是什么？

title：

文档的标题

base：

不同框架之间代码的整合

link：

引入外部文件

meta：

• charset属性：规定文档的字符编码使用那种。
• content：规定文本的格式
• name：viewport
  • 移动端适配
• content：
  • width：device-width ：宽度是设备屏幕的宽度
  • initical-scale： 1.0 ：表示初始时候页面的缩放大小为1.0倍
  • maximum-scale： 1.0 ：表示允许最大的缩放比例为1.0倍
  • minimum-scale：1.0 ：表示允许最小的缩放比例为1.0倍
  • user-scale： no/yes ：表示是允许用户进行缩放。

2、利用@media做移动端适配

• 利用@media（max-width：xxxpx）{}和@media（min-width：xxxpx）{}进行不同宽度下面的css样式

3、em与px em与rem的区别

• em与px的转化根据font-size的大小来计算，未自定义的情况下1em = 16px
• 可以在父元素中进行font-size的设置，例如font-size = 62.5% 那么子元素中的10px就等于1em
• em与rem的区别就是 em是根据父元素来进行计算的，而rem是根据跟元素来进行计算的，与父元素无关。