自定义容器和字体大小

Home

body
{
margin: 1em;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

body *
{
margin: 0;
}

#content
{
padding: 1em;
background-color: #BBDDFF;
background-image: url(column_bg.gif);
background-repeat: repeat-y;
background-position: 30em 0;
text-align: left;
}

#content p
{
margin-bottom: 1em;
}

#footer
{
margin-top: 1em;
padding: 1em;
background-color: #0066CC;
text-align: left;
}

#footer a
{
color: #FFFFFF;
}

#header
{
margin-bottom: 1em;
padding: 1em;
background-color: #0066CC;
color: #FFFFFF;
text-align: left;
}

#leftContent
{
padding-right: 10em;
}

#options
{
margin-bottom: 1em;
text-align: right;
}

#options a
{
color: #000000;
}

#rightContent
{
float: right;
width: 8em;
}

#widthContainer
{
font-size: 0.8em;
width: 40em;
margin: auto;
}

.clearer
{
clear: both;
}

= parseInt(minimumTextHeight))
{
document.body.style.fontSize = optimalSize + "px";
}
else
{
document.body.style.fontSize = parseInt(minimumTextHeight) + "px";
}

return true;
}

function textSize(size)
{
var theContainer = document.getElementById("widthContainer");
var increment = 0.1
var currentSize = parseFloat(document.getElementById("widthContainer").style.fontSize);

if (!currentSize)
{
currentSize = 0.8;
}

if (size == "smaller")
{
theContainer.style.fontSize = (currentSize - increment) + "em";
}
else
{
theContainer.style.fontSize = (currentSize + increment) + "em";
}

return true;
}

-->

Text smaller |
Text bigger

Browser-width defined font size

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.

Nulla metus. Ut sodales, tortor nec sollicitudin convallis, diam diam vulputate ligula, lobortis tincidunt urna purus at urna. Pellentesque laoreet. Nulla et dolor. Praesent vestibulum quam convallis neque. Praesent sit amet odio a dui iaculis dignissim. In vel nunc a tellus vulputate pellentesque. Maecenas bibendum. Donec mi nibh, euismod in, iaculis a, eleifend et, enim. In eget lectus vitae pede nonummy elementum. Mauris accumsan, lacus ut euismod varius, odio neque egestas quam, non aliquam velit purus et purus. Vestibulum at elit nec felis suscipit pulvinar. Suspendisse at enim quis lacus mattis condimentum. Proin arcu arcu, imperdiet vitae, aliquam non, congue id, ipsum.

Aliquam eu dolor nec risus luctus faucibus. Aenean condimentum, tortor in blandit cursus, dolor magna sagittis orci, vel vehicula dolor ante at lacus. Donec vel felis in enim aliquam molestie. Sed non velit id velit pulvinar consequat. Mauris luctus. Phasellus faucibus turpis nec purus. Mauris eget ante. Donec orci enim, luctus eu, posuere at, luctus quis, pede. In in lectus. Quisque blandit, ipsum eget tincidunt scelerisque, mauris ante accumsan erat, quis congue odio erat vitae diam. Donec ut felis fermentum sem viverra pulvinar. Sed neque lorem, adipiscing ut, placerat a, ornare et, dolor. Vestibulum pretium vehicula nibh. Etiam feugiat, ligula sed pulvinar fringilla, eros arcu placerat urna, nec eleifend nisl leo sit amet urna. Suspendisse quis augue ut nibh venenatis nonummy. Nunc ut augue. In fermentum, neque eget eleifend rutrum, nulla lorem fermentum massa, eu cursus lectus mi id libero.

Nam congue ligula quis magna. Vivamus porttitor nunc non dui. Aliquam posuere dapibus tortor. Quisque facilisis, quam in semper luctus, lacus dolor gravida massa, ultrices consectetuer risus arcu nec nibh. Nulla facilisi. In a eros id eros lobortis ultrices. Vivamus sit amet neque eu magna venenatis nonummy. Pellentesque consequat. Etiam ut ipsum. Nulla consectetuer est vel quam.

Integer eu diam vitae augue sollicitudin congue. Praesent vulputate pede vel velit. Maecenas dapibus tempus lacus. Quisque lectus metus, pretium ac, mollis nec, dignissim quis, mi. Aliquam purus risus, pharetra eget, condimentum ut, blandit sit amet, leo. Suspendisse iaculis purus sed tellus. Nunc sem justo, porttitor ut, pretium eu, hendrerit eu, nunc. Vivamus sit amet neque in est venenatis faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus, eros id ultrices facilisis, pede ligula dignissim eros, sit amet tempus risus urna sed nibh. Sed massa eros, dapibus tristique, blandit et, molestie sed, enim. Phasellus leo. Integer vestibulum volutpat enim. Duis pulvinar ligula. Pellentesque luctus velit a justo. Quisque volutpat, diam quis varius commodo, neque elit dictum tortor, quis aliquet felis risus vitae wisi. Aliquam bibendum, elit ut gravida vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum.

Back to the explanation

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 自定义容器和字体大小

    Home body { margin: 1em; text-align: center; font-family: Arial, Helvetica, sans-serif; } body * { margin: 0; } #content { padding: 1em; background-color: #BBDDFF; background-image: url(column_bg.gif); background-repeat: repeat-y; background-position

  • Android 自定义TextView实现文本内容自动调整字体大小

    最近做通讯录小屏机 联系人姓名显示--长度超过边界字体变小 /** * 自定义TextView,文本内容自动调整字体大小以适应TextView的大小 * @author yzp */ public class AutoFitTextView extends TextView { private Paint mTextPaint; private float mTextSize; public AutoFitTextView(Context context) { super(context); }

  • JavaScript 控制字体大小设置的方法

    在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来: function setFontSize (id,content,params){ var oTarget = document.getElementById(id), content = document.getElementById(content), size = params.size || 14, maxSize = params.maxSize || 20, step =

  • Android自定义控件RatingBar调整字体大小

    项目需要,做一个可以调整字体大小的控件,能在滑动或点击时改变选中的位置,效果图如下: 这是一个类似于RatingBar的控件,然而配置RatingBar的样式难以实现这样的效果,如选中的图案和上面的文字对齐.因此,有必要写一个自定义View来实现. 思路如下: 新建一个TextRatingBar继承View类 在onDraw()方法中绘制元素:文字.横线.短竖线和圆形标记 重写onMeasure()方法,控制整体大小和边界 在onTouchEvent()方法中处理ACTION_DOWN和ACTI

  • Android Dialog 设置字体大小的具体方法

    先看下面图片: 这是我在做登录页面的时候,调用系统的ProgressDialog 进行等待,可是看起来很不协调,左边的等待图片过大,右边文字过小,看起来老别扭,虽然功能上不存在什么问题,但是我有强迫症,看不顺的就像弄掉.可是找了好久,没发现 ProgressDialog  有一个方法是可以设置字体的. 于是我又来CSDN查找解决方案,可是找了好久,翻了好几页都没看到想要的结果,心冷了,找到的都说ProgressDialog 可以自定义一个View,在layout定义一个布局,然后设置到Progr

  • JS实现的自定义水平滚动字体插件完整实例

    本文实例讲述了JS自定义水平滚动字体插件.分享给大家供大家参考,具体如下: <script type="text/javascript"> $(function(){ var setting = { content : " @@@@@浮动文字#### ", overStop : true, width:"100px", targetId:"huangbiao", //显示之后的回调函数 onAfterShow :

  • 浅扒Android动态设置字体大小的示例

    说点废话 Android开发中,TextView类的控件应该说是很常用了.一般来说我们是通过android:textSize="20sp" 来设置字体大小,但是很多时候也需要动态设置字体大小,调用也很简单: textView.setTextSize(textSize); 为了适配各种各样的型号,我们一般会将字体大小定义到dimens.xml之中: <dimen name="text_size">16sp</dimen> 然后在java代码中设

  • iOS字体大小适配的3种方法示例代码

    前言 在iOS开发中,有些公司对字体也有适配要求,为了让字体美观,所以在不同尺寸的屏幕上字体大小也要做到适配. 自己总结了几种方法供大家参考,下面话不多说了,来一起看看详细的介绍吧 方法如下: 方法一:用宏定义适配字体大小(根据屏幕尺寸判断) //宏定义 #define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width) #define FONT_SIZE(size) ([UIFont systemFontOfSize:FontSize(

  • jQuery实现切换字体大小的方法

    本文实例讲述了jQuery实现切换字体大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $.fn.switchSize = function(settings) { // defaults settings settings = $.extend({     container: 'body',     arrSizeClass: ['small', 'medium', 'large'],     defaultClass: 'medium',     saveCook

  • ExtJs默认的字体大小改变的几种方法(自己整理)

    以下列出网上收集的几种方法,希望对大家有用. 1. 只需把ext-all.css样式文件中的所有11px换成12px,这样就为统一的12px的字体了. 但是如果再想增大,那么这时候不光是把源文件的11px换成15px,而且需要把里面和font有关的12px换成15px. 改完之后按钮出现毛边,在样式文件中加 复制代码 代码如下: .ext-ie .x-btn-text-icon .x-btn-center .x-btn-text { padding:3px 0px 0px 0px; } 毛边就不

随机推荐