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,既屏幕宽度的一半

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

目录
相关文章
|
3天前
|
前端开发 JavaScript 网络协议
深入理解Python Web开发中的前后端分离与WebSocket实时通信技术
【7月更文挑战第18天】前后端分离采用Flask/Django框架,前端JavaScript框架如Vue.js与后端通过AJAX/Fetch通信。WebSocket提供实时双向通信,Python可借助websockets库或Flask-SocketIO实现。最佳实践包括定义清晰的接口规范,确保安全性(HTTPS,认证授权),优化性能,和健壮的错误处理。结合两者,打造高效实时应用。
15 1
|
4天前
|
安全 编译器 PHP
PHP 8:探索新特性及其对现代Web开发的影响
本文将深入探讨PHP 8版本中引入的新特性,以及这些更新如何影响现代Web开发的实践。我们将通过实际的代码示例和性能分析,展示PHP 8如何提升开发效率、加强安全性和增强应用性能,从而为开发者提供更优的编程体验。 【7月更文挑战第18天】
13 6
|
15小时前
|
缓存 前端开发 JavaScript
现代Web开发中的前端性能优化策略
在当今快节奏的Web开发环境中,前端性能优化至关重要。本文探讨了一些实用的策略和技术,帮助开发人员提升网页加载速度和用户体验。
|
2天前
|
安全 编译器 API
探索PHP 8的新特性及其对现代Web开发的影响
随着PHP 8的发布,这一广泛使用的服务器端脚本语言迎来了重大升级。本文将深入探讨PHP 8引入的关键新特性,包括JIT编译器、联合类型、命名参数、匹配表达式等,以及这些特性如何提升性能、增强类型安全和改善开发者体验。同时,我们将分析这些变化对于现代Web开发实践的具体影响,以及它们如何塑造了PHP的未来发展方向。
9 1
|
8天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
20 7
|
5天前
|
JavaScript 前端开发 UED
WebSocket在Python Web开发中的革新应用:解锁实时通信的新可能
【7月更文挑战第16天】WebSocket是实现Web实时通信的协议,与HTTP不同,它提供持久双向连接,允许服务器主动推送数据。Python有多种库如websockets和Flask-SocketIO支持WebSocket开发。使用Flask-SocketIO的简单示例包括定义路由、监听消息事件,并在HTML中用JavaScript建立连接。WebSocket提高了实时性、减少了服务器压力,广泛应用于聊天、游戏等场景。
12 1
|
8天前
|
API 数据库 开发者
逆袭之路!Django/Flask助你成为Web开发界的璀璨新星!
【7月更文挑战第13天】在Python Web开发中,Django和Flask各具优势。Django适合快速构建大型项目,如在线书店,其ORM和内置功能让复杂应用轻松上手。Flask则以其轻量和灵活性见长,适用于个人博客等小型应用。选择框架应根据项目需求和个人偏好,两者都能助开发者在Web开发领域大放异彩。
17 2
|
14小时前
|
前端开发 JavaScript 数据管理
现代Web开发中的前端框架选择指南
选择合适的前端框架是现代Web开发中的关键决策之一。本文探讨了几种流行的前端框架,比较它们的特点和适用场景,帮助开发者在众多选项中做出理性的选择。
|
14小时前
|
缓存 前端开发 JavaScript
现代Web开发中的前端性能优化策略
在当今快节奏的Web开发环境中,前端性能优化是确保用户体验和网站成功的关键。本文探讨了一些实用的前端性能优化策略,涵盖了从代码优化到资源加载的各个方面,帮助开发者有效提升网页加载速度和响应性能。
|
19小时前
|
前端开发 JavaScript 数据处理
深入Python Web开发:模板引擎的力量与最佳实践
【7月更文挑战第21天】Python Web开发中,模板引擎如Jinja2促进MVC架构的View层,分离后端数据与前端展示,提升开发效率和代码复用。选择适合的模板引擎,利用其数据注入、模板继承等特性,保持模板简洁,注重安全性,是最佳实践。例如,Jinja2允许在HTML中嵌入变量并处理循环,简化渲染过程。
4 0