第131天:移动web页面的排版与布局

一、总之一句话, 尽量用mm 毫米作为标准单位.

采用新的相对单位 rem 首先设置htmlfont-size 为根大小. 

html{  font-size:1mm;  }  .titleheight{  height:10rem; //这里等于10mm  width:11rem; //这里等于11mm  }

当  html{  font-size:2mm;  }

.titleheight{  height:10rem; //这里等于20mm  width:11rem; //这里等于22mm  }

其它地方用rem做单位.

html4 的浏览器时代, 一致都是用px来作为标准单位的.  自从有了手机以后, html的单位又变得混乱了起来. 自适应变的非常困难.  我们公司 . 美工设计的宽度标准是750px  所有的手机移动页面全部按照 750px 设计出图.  在浏览器上如果按照750px 切图, 切好的图在窄屏手机上会出现各种, 换行. 变高.甚至变形的问题.  浏览效果完全无法跟美工设计的效果相提并论.

如何做到这种效果呢?

二、百分比法.

一般的百分比都是给宽度设置百分比. 高度 自动.或者定高.一个固定的数值.如果 高度也可以百分比话.就太好 了. 可惜div 默认是没有高度的. 

  1. 采用新的相对单位 rem

rem 单位是相对 htmlfont-size 来计算的.

如果html的 font-size = 10px  那么  1rem = 10px  2rem = 20px  同理750px = 75rem

如果html的 font-size = 12px  那么  1rem = 12px  2rem = 24px  同理 62.5rem = 750px

反过来讲.  美工按照750px 设计的图. 到了675px的屏幕上.  尺寸就应该响应缩小到 9/10;  也就是说, 原来75rem的图片. 应该显示成 67.5rem 才对.  但是我们不能每个元素都根据界面宽度动态改尺寸长度.

根据rem的规则.我们可以动态修改html 的 font-size 的大小.  原先750px 映射到10px 上, 每个px 承载了 75 个px的宽度变化.

文字无法描述清楚,还是上图吧.3张图.一看就清楚了.一图胜千文

所以写到这里大概也明白了.

html 的font-size = 美工出图宽度px 的时候.你按照老的方法,切图使用ps工具测量的px 完全等于 rem 可以随便互换.

如果屏幕尺寸变小了. html的font-size 也跟着变小. 那么你的图片也跟着等比例变小.

推理下去,有点令人吃惊. html的font-size 一般要 = 750px 了.

不过我目前的页面采用的是 html 的font-size = 10px;  font-size=750px 我还没试过.

10px很明显的缺点是梯度太高,平滑度不够好.  20px勉强可以接受  30px又不好算.  40px好像还可以接受,平滑度,和单位换算都还可以..

但是实际使用中最好用的还是 1px = 1rem 然后用javascript 根据屏幕的宽度动态计算html 的font-size

采用rem方法布局页面的话  切图的时候要注意,  一. 要么文字和图片一起切成图片.

二. 要么,采用时下流行的表情字体..例如.Entypo字体 

所以我在这里建议前端美工们,

一是.尽量采用. 表情字体作为素材蓝本..(是尽量,不是一定…)

二是.尽量不要将图片和字体形成明显的对比.例如,明显的将图标和字体左右对齐.

三是.能单独用图片的地方尽量只用图片.

四是.为了适应不同宽度的手机. 请尽量少出现左右布局. 多用上下布局.左右布局最多不能超过3列. 超过3列的,应该考虑把多的那一列放到内容里水平显示.

五是. 想不到了.

最后贴一下,css如何动态改变html的font-size

 1 @media screen and (max-width:750px) 
 2 {
 3     html{
 4         font-size:10mm; /*满屏按照10px来算,最好的写法是单位为 mm 毫米*/
 5     } 
 6 }
 7 @media screen and (max-width:675px)
 8 {
 9 
10     html{
11         font-size:9mm; /*屏幕等于设计的 9/10, 标准尺寸也缩小到9/10 最好的写法是单位为 mm 毫米 */
12     } 
13 }
14 @media screen and (max-width:600px)
15 {
16     html{
17         font-size:8mm;/*屏幕等于设计的 8/10, 标准尺寸也缩小到8/10  */
18     } 
19 }
20 @media screen and (max-width:525px)
21 {
22     html{
23         font-size:7mm;/*屏幕等于设计的 7/10, 标准尺寸也缩小到7/10  */
24     } 
25 }
26 @media screen and (max-width:450px)
27 {
28     html{
29         font-size:6mm; 
30     } 
31 }
32 @media screen and (max-width:375px)
33 {
34     html{
35         font-size:5mm;
36     } 
37 }
38 @media screen and (max-width:300px)
39 {
40     html{
41         font-size:4mm;
42     } 
43 }
44 
45 
46 .am-container {
47     -webkit-box-sizing: border-box;
48     box-sizing: border-box;
49     margin-left: auto;
50     margin-right: auto;
51     padding-left:  0rem; 
52     padding-right: 0rem; 
53     width: 100%; 
54     max-width:75rem;
55 }

如果html font-size = 750px  1rem = 750px  所以,我们在使用的时候.

美工出图750px, 我们在代码里面得写成 1rem  美工出图75px, 我们在代码里面得写成 0.1rem  问: 美工出图10px = 我们的代码里面得写多少 rem?

估计要拿计算器了. 不好算.  所以为了计算方便. 建议还是使用  font-size= 10px 或者  font-size=100px

这样我们根据美工出图的宽度除以10 或者100就是对应的rem

为了平滑起见 html 的 font-size = 100px 最好.

而且网上看到有人说,大多数浏览器font-size的最小值为12px,所以只能用100了。嗯,为了安全起见100px 似乎更合适.

最后在上另外一个问题., 上面的方法只是解决了如何动态的适应不同的宽度的设备.  但是如何适应不同分辨率的设备呢?

同样的页面,在不同分辨率的手机上. 显示效果是不一样的.

例如: 下图.

指定分辨率会使得这种情况有所改善.  经过手动测试发现 . target-densitydpi=250 比较适合各类浏览器.  当然更好的办法是. 用js动态去创建viewport 这个标签.

但是这种改变分辨率的方法不太好.控制  不如直接把width=750,写死来的更直接.  如下代码

1   <meta name="viewport" content="width=750, initial-scale=1, maximum-scale=1, user-scalable=no">

三、为何要更改成mm?  mm单位是实际的物理尺寸。这个单位是屏幕的物理尺寸。各种手机都进行过自动把1mm转换成对应的px。 因为屏幕质量不一样。好的屏幕在1mm的地方可以放下10个像素。 差的屏幕1mm只能放3个像素。用放大镜看就会看出来。差的屏幕那个像素特别大。

用mm 单位作为基础单位。可以做到各种手机浏览器的可视尺寸98%一致。  再加上rem的等比缩放功能。 可以说基本上能解决常见的浏览器兼容问题。  不信你可以拿尺子量一下。 如果某款手机不支持mm。 肯定是那款手机有问题。

下面的代码我没试过。 感觉应该可以。

 1 @media screen and (max-width:75mm) /*这里也要改成毫米吧。要不要?*/ 
 2 {
 3     html{
 4         font-size:10mm; /*满屏按照10px来算,最好的写法是单位为 mm 毫米*/
 5     } 
 6 }
 7 @media screen and (max-width:60mm)
 8 {
 9     html{
10         font-size:8mm;/*屏幕等于设计的 8/10, 标准尺寸也缩小到8/10  */
11     } 
12 }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

创意饼图的制作技巧——图标填充饼图!

今天给大家介绍一种创意饼图的制作技巧——图标填充饼图! 创意饼图 ▽ 觉得默认的饼图不够炫酷、不够养眼,木有逼格 没关系,今天就交给大家一种创意饼图的制作技...

38110
来自专栏熊二哥

Html与CSS快速入门01-基础概念

Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间。最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下。内容相对都比较简单,...

2407
来自专栏一“技”之长

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

        众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的...

2103
来自专栏斜述视角

0基础学习网页制作-Html

文章来自:4月14日早,在贵州大学北校区10栋715寝室,对物理学院同学培训的内容。

1052
来自专栏葡萄城控件技术团队

响应式设计(Response Web Design)实践

前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。 如何让自己的网站也响应式Web设计,可以响...

2717
来自专栏GreenLeaves

CSS-DOM介绍

三位一体的网页: 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体: 1、结构层: 结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些...

1898
来自专栏Material Design组件

Material Design — 按钮( Buttons)

40816
来自专栏九彩拼盘的叨叨叨

Web动画性能介绍

帧率(FPS):描述每秒播放的帧数,单位为 Hz 或者 frame/s (帧/秒)。

1063
来自专栏前端知识分享

第54天:原生js实现轮播图效果

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

3681
来自专栏程序员的知识天地

利用HTML5,无JS实现各种交互效果

<details> 标签在Chrome,Firefox等浏览器下默认是有展开收起行为的,例如下面HTML:

7602

扫码关注云+社区

领取腾讯云代金券