卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题

问题1 放大时文本内容异常换行

我们来看一下截图1-1

卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题_第1张图片

图1-2 

卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题_第2张图片

针对这种问题怎么解决?见下图1-3

卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题_第3张图片

white-space:nowrap//不换行

效果:图1-4

问题2 文本居中问题

 参考图1-4的问题,我们的处理办法是:图2-1

其中line-height 一般等于父物体的height,如图2-2所示

其结果显示在如图2-3所示

问题3 极限放大时,换行的问题,比如chrom浏览器放到500%

效果图见3-1

卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题_第4张图片

处理办法是见图3-2

分配一个宽度:

 

卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题_第5张图片

 

处理结果:见图3-3

 

卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题_第6张图片

 

 

问题4 极限放大时,文本超出div范围

见图4-1

卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题_第7张图片

解决办法也简单,就是我们保证它的外边框也能自动缩放,通过添加width和height为xxrem就可以,见图4-2

卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题_第8张图片

最终效果见图4-3

卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题_第9张图片

我即时放大到了500%,也没有变得很异常

用手机进行观看时,也比较正常

卜若的代码笔记-html编程技巧-自适应问题1.放大跑偏问题_第10张图片

 

 

你可能感兴趣的:(Html编程技巧,html)