手机响应式网站设计_如何做响应式网页设计

手机响应式网站设计_如何做响应式网页设计##wap页面怎么做?这个问题困扰了我好久,在PC上我们惯用的`px`单位在手机上根本不适用,即使我们写了“防止网页自动缩放也无济于事,因为各手机分辨率大小不同。用百分比布局。宽度自适应做到了但是高

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

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

wap页面怎么做?

这个问题困扰了我好久,在PC上我们惯用的px单位在手机上根本不适用,即使我们写了<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>防止网页自动缩放也无济于事,因为各手机分辨率大小不同。

用百分比布局。宽度自适应做到了但是高度呢,高度也用百分比吗?难道把元素的高度写死吗。这种做法就是jquery mobile页面的做法了,大屏手机显示效果不好看。

Bootstrap做栅格化。这种做法有个很大的弊病,小屏隐藏多余的元素来展示页面,而实际上那些元素你都加载进来了,浪费资源。

前面两种做法也很难完美还原设计图的尺寸。那有什么好的办法呢?

灵活的em与灵活可控的rem

em是相对单位,相对于父级的字号。这里的父级其实指的是祖先级,一直往上哪里定义了字号就相对它,直到根节点html

假设它是相对于根节点的,根节点html的字号一般是16px,那么1em=16px12px=0.75em,假如在到根节点之前的节点已经有设置过字号了,比如说它设置了2em,那么1em=2em=32px0.75em=24px

这时候我们就发现坑爹了,假如我们是元素嵌套的,父级上设置了字号,这个单位换算的规则都变了!那怎么办?

rem也是相对单位,但是它是相对根节点的。这个就好办了,永远相对同一个字号,规则就一样了。假设根节点设置了font-size=16px 那么1em=16px12px=0.75em;假设根节点设置了font-size=32px 那么1em=32px0.75em=24px。不管在哪个地方单位换算的规则都是不会变的。

如何跟设计图对接

设计图上的单位是px,我们如何转换成em呢,难道用计算器吗?
这里有个单位换算小工具,它是换算em的,但是你也可以用它来换算rem,只要把基础像素设置成根节点字号就行了。但是基础像素应该设置成多少呢?

我看了小米的wap页面,他们做了一个媒体查询表,根据不同分辨率设置根目录的字号。这样就可以实现自适应了!它是直接写在页面上,模拟手机看源码吧view-source:http://m.mi.com/v2.html。下面是格式化后的部分代码:

@media only screen and (max-width: 300px) {
  html {
    font-size: 8.33333px
  }

  .viewport {
    max-width: 300px
  }
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
  html {
    font-size: 8.33333px
  }

  .viewport {
    max-width: 310px
  }
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
  html {
    font-size: 8.61111px
  }

  .viewport {
    max-width: 320px
  }
}
@media only screen and (max-width: 350px) and (min-width: 320px) {
  html {
    font-size: 8.88889px
  }

  .viewport {
    max-width: 350px
  }
}
@media only screen and (max-width: 360px) and (min-width: 350px) {
  html {
    font-size: 9.72222px
  }

  .viewport {
    max-width: 360px
  }
}
……

棒棒哒有木有!这时候我们根据这个表来设置基础像素,比如设计图的宽度是640px,我们看它这个表,可以看到html对应的font-size值是17.77778px,那么基础像素就是这个值,然后我们根据设计图量出来的px长度转换成emrem单位了!

有没有更智能的方式?

为什么每次都要通过小工具去换算单位呢,有没有办法让单位自动换算的?
直接用css当然是行不通的,虽然它有calc()这个属性,但是兼容性不强。我们配合CSS预编译来做呢,lesssassstylus,不是可以让css有运算能力吗。
之后我发现了百度EFE团队开发的基于less的est框架里面就包含了这功能

推荐下自己的

第一次用了est,就发现了bug,@margin-rem()方法用不了,然后我打开它的less源文件想去修改一下的,发现它的实现方式一点都不优雅!主要因为less语言能力太弱了。改好之后又遇到几个其它方法的坑,遂打算自己写一个,反正也不难。

我最先尝试使用sass来写的。它是基于ruby环境的,这个我就不计较了,反正安装方式跟node一样简单,安装子。后来发现它竟然不支持正则,还能不能好好玩耍了?

最后就用了先进的stylus。它是基于node环境,适合我们前端的开发环境,不错。

然后我就模仿了est开发了自己的qst,自我感觉良好,已经在两个项目中实践了。

相关链接

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166421.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 使用php实现单点登录实例详解

    使用php实现单点登录实例详解

    2021年10月27日
  • GridView 的数据绑定

    GridView 的数据绑定1.AlternatingItemTemplate:用于配置交替行的模板,所谓交替行就是第2、4、6、8…行,如果没有配置AlternatingItemTemplate,所有行都是用ItemTem

  • 细谈微商分销系统开发对企业的发展是好还是坏「建议收藏」

    细谈微商分销系统开发对企业的发展是好还是坏「建议收藏」  微商分销系统开发,,微商二级分销系统,微商系统开发,微商软件。微商APP开发,微商分销模式,微商全返系统,微商返利系统,微商管理系统。  从各个层面和角度,全方位解决微商品牌企业,在渠道中的一切微商管理问题,让微商品牌和团队轻松应对市场。  一、微商分销系统的特点  1.当你成为产品的代理商之后,你可以选择多种发货模式,平台或推广者可以选择发货模式。  …

  • conda 删除源_conda删除包

    conda 删除源_conda删除包记录自己新建一个py3.5的conda环境,遇到镜像连接超级慢,清华的镜像也不太行的亚子,发现之前安装的anaconda中有一个源速度还可以。一、查看自己conda的链接进入cmdcondainfo调出conda的信息二、添加源condaconfig–addchannelshttps://repo.continuum.io/pkgs/main/condaconf…

  • mysql 动静分离_如何动静分离?「建议收藏」

    mysql 动静分离_如何动静分离?「建议收藏」某次面试,hiremanager问我如何做一个大规模的网站,我把我所知道的都讲了,包括squid做的cdncache等等,他又问我,你觉得cdn这部分有什么瓶颈吗?我当时只想到所有动静态请求都路过squid,只是苦苦想着如何去掉动态的请求,他接着问,如何实现?我当时真想不到办法了。后来突然想起看的介绍,实际上我也接触过的,域名分离即可。比如某client的某个请求包含http:/xxx.com…

  • Spring Aop底层原理详解(利用spring后置处理器实现AOP)

    Spring Aop底层原理详解(利用spring后置处理器实现AOP)写在前面:对于一个java程序员来说,相信绝大多数都有这样的面试经历,面试官问:你知道什么是aop吗?谈谈你是怎么理解aop的?等等诸如此类关于aop的问题。当然对于一些小白可能会一脸懵逼;对于一些工作一两年的,可能知道,哦!aop就是面向切面变成,打印日志啊,什么什么的,要是有点学习深度的呢可能会说aop底层实现利用了jdk动态代理,cglib啊什么的。很多时候可能面试就到此打住了,当然,然后也…

发表回复

您的电子邮箱地址不会被公开。

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