手机页面的前端开发工具_手机web页面

手机页面的前端开发工具_手机web页面1.元素使用rem单位(相对于html的font-size,单位px)2.元素使用em单位(相对于自身的font-size,单位px)媒体查询样式的条件可以使用and满足想要的范围注意:手

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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.net/168331.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 字符串常量池有什么用_字符串常量池在堆中还是方法区

    字符串常量池有什么用_字符串常量池在堆中还是方法区看网上的介绍,对于字符串常量池中到底保存的是字符串对象,还是字符串对象的引用,众说纷纭…看jdk1.8对intern()的说明.Whentheinternmethodisinvoked,ifthepoolalreadycontainsastringequaltothisStringobjectasdeterminedbytheequals(…

    2022年7月28日
    1
  • APK 签名详解

    APK 签名详解1.签名的意义  为了保证每个应用程序开发商合法ID,防止部分开放商可能通过使用相同的PackageName来混淆替换已经安装的程序,我们需要对我们发布的APK文件进行唯一签名,保证我们每次发布的版本的一致性。2.签名对你的App的影响。   你不可能只做一个APP,你可能有一个宏伟的战略工程,想要在生活,服务,游戏,系统各个领域都想插足的话,你不可能只做一个APP,谷歌建议你把你所有的

    2022年6月5日
    78
  • GOD is a DJ[通俗易懂]

    GOD is a DJ[通俗易懂]先知教会我们知识,但不赐予我们力量;上帝创造我们身体,但不注入我们生命

    2022年10月8日
    0
  • porm文件中的build标签

    porm文件中的build标签分类    (1)全局配置(projectbuild)         针对整个项目的所有情况都有效    (2)配置(profilebuild)         针对不同的profile配置[html] viewplain copyproject xm

    2022年6月16日
    111
  • docker镜像文件导出_docker导入导出镜像

    docker镜像文件导出_docker导入导出镜像导语:需要迁移docker目录,以防万一备份一下镜像。方法1:dockerimages|awk'{print$1″:”$2}’#效果等同于dockerimages–format'{{.Repository}}:{{.Tag}}’逐个导出foriin`dockerimages–format'{{.Repository}}:{{.Tag}}’`;dodockersave$i>/mnt/images/`echo$i|sed’s/:/-

    2022年9月3日
    3
  • 安卓软件开发_应用程序UI组件意外停止

    安卓软件开发_应用程序UI组件意外停止——成功属于耐得住寂寞的人,接下来几篇将讲述Android应用程序的原理及术语,可能会比较枯燥。如果能够静下心来看,相信成功将属于你。引言为了后面的例子做准备,本篇及接下来几篇将介绍Andro

    2022年8月4日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号