您现在的位置是：网站首页> 编程资料编程资料
移动端rem布局的两种实现方法_css3_CSS_网页制作_
2021-09-10
984人已围观
简介 现在有两种rem布局的样式控制，其中一种是通过css的媒体查询，另外一种是通过引入js来控制，这两种方法各有各的优点，但是我还是喜欢用引入js的方法来实现rem布局
据了解，现在有两种rem布局的样式控制，其中一种是通过css的媒体查询，另外一种是通过引入js来控制，这两种方法各有各的优点，但是我还是喜欢用引入js的方法来实现rem布局，尽管现在市面上大多数都在使用css媒体查询的方式实现，在此我就将这两种方法做一总结：
方法一：常用方法，css媒体查询
@media only screen and (max-width: 600px), only screen and (max-device-width:400px) { html,body { font-size:50px; } } @media only screen and (max-width: 500px), only screen and (max-device-width:400px) { html,body { font-size:40px; } } @media only screen and (max-width: 400px), only screen and (max-device-width:300px) { html,body { font-size:30px; } } .box{ border: 1rem solid #000; font-size: 1rem; }对于这种方法而言，他仅仅通过css文件就可以实现，在加载页面的过程中，请求的文件较少，但是如果使用的两个移动端设备屏幕宽度相差不大，都在媒体查询所设置的同一区间，那么页面中的文字大小等不会变化，可是使用引入js的方法就不一样了。
方法二：引入js
// 需求：根据设计图的比例去动态设置不同屏幕下面对应的font-size值 // 这段JS不要添加入口函数，并且引用的时候放到最前面 // ui的大小根据自己的需求去改 // 设计图的宽度 var ui = 750; // 自己设定的font值 var font = 40; // 得到比例值 var ratio = ui/font; var oHtml = document.documentElement; var screenWidth = oHtml.offsetWidth; // 初始的时候调用一次 getSize(); window.addEventListener('resize', getSize); // 在resize的时候动态设置fontsize值 function getSize(){ screenWidth = oHtml.offsetWidth; // 限制区间 if(screenWidth <= 320){ screenWidth = 320; }else if(screenWidth >= ui){ screenWidth = ui; } oHtml.style.fontSize = screenWidth/ratio + 'px'; }这种通过引入js的方法，面对不同尺寸的移动端设备，都能实现文字大小等尺寸的细微变化。
相关内容
- CSS 实现元素较宽不能被完全展示时将其隐藏的方法_CSS教程_CSS_网页制作_
- 使用CSS3 font-feature-settings特性减除字体动画震颤效果_CSS教程_CSS_网页制作_
- 详解css3自定义滚动条样式写法_css3_CSS_网页制作_
- CSS 的加载及加载顺序简介_CSS教程_CSS_网页制作_
- CSS居中实例之大小不固定的图片居中方法_CSS教程_CSS_网页制作_
- CSS Flexbox的具体用法详解_CSS教程_CSS_网页制作_
- CSS学习笔记之常用Mixin封装实例代码_CSS教程_CSS_网页制作_
- 如何理解 CSS 布局和块级格式上下文_CSS教程_CSS_网页制作_
- css实现图片横向排列滚动效果_CSS教程_CSS_网页制作_
- 5分钟教你学会 CSS Grid 布局_CSS教程_CSS_网页制作_
