web开发前端适配

简介: web开发前端适配

移动端适配

修改根目录,index.html,设置屏幕宽度位20rem,可根据项目需求自定义

<script>
   function gethtmlfontsize(){
    // 三个步骤:
    // 1.获取html的宽,
    let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body
    console.log(htmlwidth);    
    // 2.htmlDom
    let htmlDom=document.getElementsByTagName("html")[0]
    console.log(htmlDom);
    //3.设置根元素样式
    htmlDom.style.fontSize=htmlwidth/20+'px';
}
// 调用一次
gethtmlfontsize();
// 添加监听事件(resize是监听的意思)
window.addEventListener('resize',gethtmlfontsize)
</script>

完整代码

这个是vue中测试的html效果是一样的,新增一个div标签,设置背景颜色和宽度,示例设置div宽度位10rem,既屏幕宽度的一半

、打开浏览器,修改设备,如图所示

目录
相关文章
|
2天前
|
JavaScript 程序员 应用服务中间件
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(2)
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(2)
17 7
|
2天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
18 6
|
2天前
|
XML 存储 JavaScript
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(1)
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(1)
14 5
|
1天前
|
程序员 PHP 数据库
深入理解PHP 7的新特性及其对现代Web开发的影响
【6月更文挑战第26天】随着互联网技术的飞速发展,PHP作为服务端脚本语言的佼佼者,其最新版本PHP 7带来了性能和功能上的显著提升。本文将深度剖析PHP 7中的新特性,并探讨这些变化如何优化现代Web开发实践,提升应用性能及开发效率。我们将从语言本身的变化到实际应用案例,全面解读PHP 7给开发者带来的福音。
4 1
|
2天前
|
Java Maven 容器
快速入门Web开发(下)(2)
快速入门Web开发(下)(2)
7 2
|
2天前
|
SQL XML Java
快速入门Web开发(中)后端开发(有重点)(3)
快速入门Web开发(中)后端开发(有重点)(3)
8 1
|
2天前
|
前端开发 JavaScript Java
快速入门Web开发(中)后端开发(有重点)(2)
快速入门Web开发(中)后端开发(有重点)(2)
8 0
快速入门Web开发(中)后端开发(有重点)(2)
|
18小时前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。
|
1天前
|
前端开发 程序员 API
视觉智能开放平台产品使用合集之web前端拉起人脸识别该如何操作
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
2天前
|
网络协议 开发者 Python