手机页面的前端开发工具_手机web页面
2023-06-13 09:12:57 时间
大家好,又见面了,我是你们的朋友全栈君。
1.元素使用rem单位(相对于html的font-size,单位px)
1 /* 自动调节页面适配 */
2 $(function(){
3 (function(){
4 var oContainer = $('#container');//body下的640px的容器 margin: 0 auto
5 var oHtml = $('html').eq(0);
6 changeHtmlFontSize();
7 function changeHtmlFontSize(){
8 var oContainerWidth = oContainer.outerWidth();
9 oHtml.css('font-size',oContainerWidth/40+'px');
10 }
11 $(window).resize(function(){
12 changeHtmlFontSize();
13 })
14 })()
15 })
2.元素使用em单位(相对于自身的font-size,单位px)
1 #example {
2 font-size: calc(100vw / 32); //vw 即view-width的意思
3 }
4 @media (min-width: 640px){
5 #example {
6 font-size: 20px;
7 }
8 }
9 @media (max-width: 320px){
10 #example {
11 font-size: 10px;
12 }
13 }
媒体查询样式的条件 可以使用 and 满足想要的范围
注意:手机页面都要加上这个
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0″>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/168331.html原文链接:https://javaforall.cn
相关文章
- web前端 | 如何选择撸码神器
- 2022网鼎杯一道web复现
- web面试题及答案_前端html面试题
- Go Web---Web服务器
- Rust 和 Wasm 的融合,使用 yew 构建 web 前端(5)- 构建 HTTP 请求、与外部服务器通信的两种方法
- java分前端后端吗_Java Web属于前端还是后端
- RabbitMQ概述-安装-web控制台
- web前端学习/工作笔记(七)
- WEB前端day1(HTML5+CSS3)
- 开源 web ide_强大的开源Web编辑器(IDE)[通俗易懂]
- web安全——聊聊csrf跨站请求伪造
- 「Go框架」深入理解web框架的中间件运行机制
- 【愚公系列】2023年03月 其他-Web前端基础面试题(CSS_42道)
- 完整版web前端学习路线图(超详细自学路线)
- GitLab技术选型为何如此不同:坚持用过气Web框架十多年、坚决不用微服务
- 给页面写一个炫酷的时钟特效【web前端】
- Bootstrap v3.3.7 发布,一个 Web 前端框架详解编程语言
- 构建未来:Linux 架构的Web 开发(linux架构web)
- Vue与Oracle携手,联手打造革命性Web应用(vueoracle)
- Linux下Web应用的发布之旅(linuxweb发布)
- 在 Ubuntu 17.10 上安装 AWFFull Web 服务器日志分析应用程序
- 如何在Ubuntu/Fedora/Debian中安装开源Web应用GitLab
- CSS3 Web字体
- Yaf框架与MySQL数据库的结合:实现高效率的Web开发。(yafmysql)
- 解决多种web问题Linux下Apache解决多种Web问题:让你的网络更安全可靠(linux下apache)
- 网页用SQL Server建立前端Web应用(sqlserver前台)
- 前端Web与Redis的连接创建更强大的服务(前端web连接redis)