HTML5页面移动端自适应布局的实现示例代码 html5

文章主要介绍了html5移动端自适应布局的实现，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧。
【HTML5页面移动端自适应布局的实现示例代码】场景：为适应各种大小的屏幕
自适应布局我知道的两种方式
1.使用媒体查询，下面制定了几种适应方式，例如第一个表示屏幕宽度在320px-360px之间的，html字体大小适配为13.65px

@media only screen and (max-width: 360px) and (min-width: 320px){ html{ font-size:13.65px; }} @media only screen and (max-width: 375px) and (min-width: 360px){ html{ font-size:23.4375px; }} @media only screen and (max-width: 390px) and (min-width: 375px){ html{ font-size:23.4375px; }} @media only screen and (max-width: 414px) and (min-width: 390px){ html{ font-size:17.64px; }} @media only screen and (max-width: 640px) and (min-width: 414px){ html{ font-size:17.664px; }} @media screen and (min-width: 640px){ html{ font-size:27.31px; }}

2.响应式，获取到屏幕的宽度，计算出一定的比例大小，使用rem代替px，在使用的时候如 font-size：1rem，在不同屏幕大小的手机上展示的大小效果是不一样的，和手机屏幕的大小比例自适应。