精华内容
下载资源
问答
  • 手机网页字体大小单位用em

    千次阅读 2016-11-14 17:11:33
    手机网页字体大小单位用em

    手机网页字体大小单位用em


    不同手机的浏览器默认分辩率是不一样的。iphone的宽度都是320px的。三星的有可能是480px或360px的宽度。

    你可以通过媒体查询设置在不同分辩率下字体的大小。


    @media only screen and (min-width:320px){
      body{font-size:11.5px!important}.viewport{max-width:320px}
    }
    @media only screen and (min-width:360px){
      body{font-size:12.5px!important}.viewport{max-width:360px}
    }
    @media only screen and (min-width:480px){
      body{font-size:16px!important}.viewport{max-width:480px}
    }


    展开全文
  • ps制作手机网页字体大小To make web content work, text on a page must be readable for all visitors. Following a few basic rules will ensure that your text is as legible as possible: 要使Web内容正常...

    ps制作手机端网页字体大小

    To make web content work, text on a page must be readable for all visitors. Following a few basic rules will ensure that your text is as legible as possible:

    要使Web内容正常工作,页面上的文本必须对所有访问者都可读。 遵循一些基本规则将确保您的文字尽可能清晰:

    • It’s your duty to resist pressure from clients to fill the page with content. More text tends to create a crowded design, forcing font sizes to become smaller to compensate and overwhelming the casual visitor. Writing for the web is a skill that drives content in the opposite direction: making body copy as concise as possible.

      抵制来自客户的压力,使内容充满页面是您的责任。 更多的文字往往会造成拥挤的设计,迫使字体大小变小,以补偿和淹没临时访客。 网络写作是一种在相反方向推动内容发展的技能:使正文尽可能简洁

      The number of characters per line of body text (the CPL or measure) should fall below 100 characters: 80 – 95 characters per line is ideal. In most cases, text size should be based on this requirement: i.e. fonts should be scaled up or down, or the width of containers adjusted, until you have roughly 95 characters per line. Most sidebar text should be set to approximately 35 characters per line. These settings will need to change as screen sizes narrow, using the principles of responsive design.

      每行正文文本(CPL或度量 )的字符数应低于100个字符: 理想的是每行80-95个字符在大多数情况下,文本大小应基于此要求:即应放大或缩小字体,或调整容器的宽度,直到每行大约有95个字符为止。 大多数侧边栏文本应设置为每行大约35个字符。 使用响应式设计原理,随着屏幕尺寸变窄,这些设置将需要更改。

      Generally speaking, readers want text to be larger than most designers are comfortable with. As a designer, you are looking at the content of a page every day; after a period of time, you will stop “seeing” it, and assume that everyone reads the text as instinctively as you do. It’s generally a good rule to size text slightly larger than you think it needs to be.

      一般而言, 读者希望文本比大多数设计师所喜欢的大 。 作为设计师,您每天都在浏览页面的内容; 一段时间后,您将停止“查看”该文本,并假定每个人都像您一样本能地阅读该文本。 通常,将文本的大小设置为略大于您认为需要的大小是个好规则。

      Leading is as important as font size for legibility. The vertical space between lines of text should be adjusted to optimize the readability of text.

      引导与字体大小一样重要,以提高可读性 。 文本行之间的垂直间距应进行调整,以优化文本的可读性。

    To this end, there are a few practical measures to take when writing the CSS for a site to create conditions of optimal legibility:

    为此,在为站点编写CSS时应采取一些实际措施,以创建具有最佳可读性的条件:

      1. The lazy, long, works-with-IE8-and-lower method starts your stylesheet with the following declaration:

        懒惰的,长的,可与IE8配合使用的方法使用以下声明开始样式表:

        body {
        	font-size: 62.5%;
        }

        This “mini-reset” sets 1em = 10px, allowing you to easily convert between the two units. Typically, you would follow this with declarations for text elements:

        此“ mini- reset ”设置1em = 10px ,使您可以轻松地在两个单位之间转换。 通常,您将在此之后声明文本元素:

        p, li {
        	font-size: 1.6em;
        }

        There are two disadvantages to this approach. First, you have to size every text element in your stylesheet, including paragraphs, headings, and list items, as the base size of 10px / 1em is far too small. Second, em units “cascade up”, meaning that certain combinations of elements, such as nested lists, will render larger than expected on screen. These can all be compensated for, but I prefer an alternative approach:

        这种方法有两个缺点。 首先,您必须调整样式表中每个文本元素的大小,包括段落,标题列表项 ,因为10px / 1em的基本大小太小了。 其次, em单元“层叠”,这意味着某些元素组合(例如嵌套列表 )将在屏幕上呈现比预期更大的尺寸。 这些都可以得到补偿,但是我更喜欢另一种方法:

      2. The better, faster, method that works with all modern browsers, including IE9+, starts with the following:

        适用于所有现代浏览器(包括IE9 +)的更好,更快的方法从以下内容开始:

        html {
        	font-size: 62.5%;
        }
        body {
        	font-size: 1.6rem;
        }

        Now every text element is set to a default size of 1.6rem (rem = root em unit). This becomes the baseline for all text, and the basis for a grid system. After these style rules, you only have to provide sizes in your CSS for elements that are different from the base size, such as headings. Weird text cascade effects are also avoided.

        现在,每个文本元素均设置为默认大小1.6rem(rem = root em unit)。 这将成为所有文本的基准,并成为网格系统的基础。 遵循这些样式规则后,您只需在CSS中为与基本尺寸不同的元素(例如标题)提供尺寸。 还避免了奇怪的文本级联效果。

      Set a base size for text in your CSS.

      设置CSS中文本的基本大小。

    1. Set a line-height that optimizes legibility. This is often a “by eye” judgment, as leading will change depending on the style and weight of the font. Multiplying the base size by the golden ratio can be a good place to start:

      设置线高以优化易读性 。 通常,这是一种“凭肉眼”的判断,因为前导会根据字体的样式和粗细而变化。 将基础大小乘以黄金比例可能是一个不错的起点:

      html {
      	font-size: 62.5%;
      } 
      body {
      	font-size: 1.6rem;
      	line-height: 2.56rem;
      }
    2. Turn on auto-ligatures and kerning pairs

      打开自动连字和字距调整对

      html { 
      	font-size: 62.5%;
      } 
      body {
      	font-size: 1.6rem;
      	line-height: 2.56rem;
      	text-rendering: optimizeLegibility;
      }

      Read an in-depth explanation of automatic ligatures and kerning pairs with CSS.

      阅读有关CSS自动连字和字距调整对的深入说明。

      Size containers to allow text to be read easily

      调整容器大小以使文本易于阅读

      As an example:

      举个例子:

      * {
      	box-sizing: border-box;
      }
      p {
      	margin: 3.2rem 0;
      }
      article {
      	width: 150rem;
      	padding: 3rem;
      }

      Together with the CSS above, the <article> element will allow approximately 92 characters per line.

      与上述CSS一起, <article>元素每行将允许大约92个字符。

    There are many more aspects to text legibility on the web, including color and typeface selection, but following these basic rules and practices should avoid most calamitous issues.

    网络上文本的可读性还有很多其他方面,包括颜色字体选择 ,但遵循这些基本规则和惯例应避免出现大多数灾难性问题。

    翻译自: https://thenewcode.com/578/Crafting-Optimal-Type-Sizes-For-Web-Pages

    ps制作手机端网页字体大小

    展开全文
  • html在手机浏览器如何设置字体大小

    千次阅读 2019-05-22 09:42:08
    动态计算好html的font-size之后,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size... tag:解决因为手机设置字体大小导致h5页面在webview中变形的BUG。 ...

    动态计算好html的font-size之后,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size,看看实际的这个值(webview受到系统字体设置大小的一个你想),和我们设置的是不是一样。如果不一样,就要根据比例再设置一次。
                tag:解决因为手机设置字体大小导致h5页面在webview中变形的BUG。
                1、你的页面采用了rem单位,并且是采用js动态计算html的font-size
                2、你的页面被加在了APP中的webview中
                3、这该死的手机被重设了字体大小


    function htmlFontSize() {
                    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
                    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                    var width = w > h ? h : w;
                    width = width > 720 ? 720 : width
                    var fz = ~~(width * 100000 / 36) / 10000
                    document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz + "px";
                    var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px', '') * 10000) / 10000
                    if (fz !== realfz) {
                        document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px";
                    }
                }
    htmlFontSize();

    .font-cc{
        font-size:0.14rem;//font-size:14px;
    }
    .font-tt{
        font-size:0.16rem;//font-size:16px;
    }

    展开全文
  • 手机访问项目的一个内容页时,正文的字体比边栏的字体要大,但是样式中他们的font-size大小是一样的。其中的代码片段如下 1 style> 2 html{font-size: 14px;} 3 .p{width: 600px;} 4 p{zoom:1;display: ...

    用手机访问项目的一个内容页时,正文的字体比边栏的字体要大,但是样式中他们的font-size大小是一样的。其中的代码片段如下

     1 <style>
     2     html{font-size: 14px;}
     3     .p{width: 600px;}
     4     p{zoom:1;display: inline-block;width: 600px;}
     5 
     6 </style>
     7 <body style="font-size: 14px;line-height: 1.5;">
     8 
     9 <div class="p">
    10     <img src="images/lx.jpg" alt="连续的图片"  style="width: 80%;"/>
    11     <div style="height:20px;">连续的图片</div>
    12     <p>一直</p>
    13     <p style="font-size: 14px;line-height: 1.5;">岁月流转,四季轮回,不管世事怎样变迁,一切过往,终将在流光浸染的光阴里烟消云散。就让一份自然随意的从容,含一枚清喜的浅笑,在笔墨的起落间,随着风尘的淡暖,染一纸去留无意的随缘。</p>
    14     <p>时光深处,握一缕温柔的缱绻,萦绕心中浅浅的细腻和温柔,那静静的温馨,便在眉宇间落下一抹轻轻的安然。于是,每一次忆及那些留在岁月的往事,便都会有不同的清喜,而每一天生活所赋予的,正是恬淡中那份禅意的美好。</p>    
    15     <a href="vp.html">to the viewport page</a>
    16 </div>

    结果显示如图:(注:此处的 连续的图片 几个字的font-size和下面的p中的文本的font-seize大小一样)

    为什么,连续的图片 这几个字和下面的字大小不一样呢,于是我使用远程调试工具查看他们在手机中的样式,发现p的高度,不知道是怎么计算出来的。如图

    于是就慢慢地去调试吧:

    方法一:给所有的p加上一个zoom:1;      结果不好使,没效果.。

    方法二:给header里面加上meta<meta name="viewport" content="initial-scale=1">,安卓下字体都是一样大的(我的魅族下是这样),而且p的高度也是正常计算出来的;但是苹果不买单,还是一大一小,安卓下远程调试如图:

    方法三:把p的父类div的宽度样式去掉(即默认的100%) ,字体大小一致(应用到项目中的可能性小)。

    方法四:给p写死一个高度,字体大小一致(应用可能性非常小)。

    方法五:给p加上样式display:inline-block;字体大小一致;但是不要影响排版的话,还要加上width:100%;

    p{width: 100%;display: inline-block;}

     

    :设置viewport的initial-scale=1的方法,在安卓中就像设置了<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">一样;但是在iphone中,必须要加上width=device-width这个样式才用效。但是方法三和方法四这两个方法,为什么能让字体大小一样,或者是说,为什么字体大小会显示不一样,我就不知道了。欢迎告知原因,不胜感激!

     

    展开全文
  • 对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端...
  • 手机网页html字体很小的解决办法

    千次阅读 2019-11-22 10:31:13
    手机网页html字体很小的解决办法: <meta name="viewport" content="width=device-width" initial-scale="1"/> 移动设备优先: <meta name="viewport" content="width=device-width, initial-scale=...
  • 移动端开发中苹果手机字体bug
  • 我在设置的时候,试了设置百分比,还有设置像素, 两者都不行,是什么原因,有什么解决办法
  • 设置H5页面中字体大小不跟随手机系统 WebSettings webSettings = webView.getSettings(); webSettings.setTextZoom(100); 设置原生APP字体不跟随系统字体而变化 在acvitity的父类中重写getResource方法 @...
  • pc端web、移动端web的字体大小、颜色、字体样式使用 https://www.jianshu.com/p/625b197f099a 移动端应该如何动态设置字体大小? https://segmentfault.com/a/1190000004189237 移动端应该如何动态设置字体大小...
  • 安卓的webview会出现这个问题,因为webview是手机内置浏览器的sdk封装出来的组件,因此会受手机系统的影响,但是ios的webview不会出现这个问题。 解决方法: 1、同时经过测试发现我们用document.documentElement....
  • WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 }) // 重写设置网页字体大小的事件 WeixinJSBridge.on('menu:setfont', function () { WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':...
  • 一、用户修改手机字体设置大小,影响App里打开的web页面。 手机字体设置大小,影响App的页面。 Android的可以通过webview配置webview.getSettings().setTextZoom...// 用原生方法获取用户设置的浏览器的字体大小(兼容i
  • 网页开发习惯的px单位,手机html开发不适用。源代码如下:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &...
  • 安卓手机系统设置字体大小后与APP以及web端字体大小问题最近在做一些有关html和App的一些混合式开发,在测试过程中发现,android手机系统设置了字体大小,app应用中和web服务端的页面(也就是html界面)字体都会有...
  • 关于移动端页面在手机调整字体大小后内容适配的问题,作为新手我也刚好是第一次遇到, 已经完成的移动端页面,正常情况下在手机上的浏览器端和App端都可以正常显示,可当测 试把手机字体调大后,布局就忽然变乱了....
  • h5根据手机尺寸调整字体大小

    千次阅读 2018-06-26 14:47:24
    1、允许网页宽度自动调整:首先,在网页代码的头部,加入一行viewport元标签。&lt;meta name="viewport"content="width=device-width, initial-scale=1"/&gt;viewport是网页默认的...
  • css 用的统一的样式 为什么字体不一样大![图片说明](https://img-ask.csdn.net/upload/201704/13/1492067761_909382.png)
  • 1、允许网页宽度自动调整:首先,在网页代码的头部,加入一行viewport元标签。&lt;meta name="viewport"content="width=device-width, initial-scale=1"/&gt; &lt;head&gt; ...
  • (function(doc, win) { // 用原生方法获取用户设置的浏览器的字体大小(兼容ie) if(doc.documentElement.currentStyle) { var user_webset_font=doc.documentElement.currentStyle['fontSize']; ...
  • <div class="markdown_views"><h1 id="解决因为手机设置字体大小导致h5页面在webview中变形的bug"><a name="t0" target="_blank"></a>解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5...
  • 解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,...
  • 另外我想了解目前手机网页,高度设置和文字大小是用的什么单位,固定像素,还是rem,我发现rem大屏的时候文字太大,不美观,尤其是有固定导航之类的小屏的时候还妥妥的,换大屏高度过高的直接遮住几乎半个屏幕…不...
  • android开发中字体大小会跟随这系统字体的大小修改而改变。
  • 在runtime或初始化文件中添加如下代码 // TODO Resize font-size (function(win){ var normalsize = 36; var html = document.getElementsByTagName("html")[0]; var fs = parseInt(getStyle(html, '...
  • 工作日志记录:在应用的开发过程中,适配的问题是我认为最难处理的,这里碰到一个问题就是当用户的手机字体大小不一样时,你的应用还能保证它的字体适配合适而不导致应用的适配出现杂乱不堪的问题吗?如果不做特殊...
  • 1. 目的:实现h5网页手机端即可缩放且字体与电脑端字体匹配 2. ``` ,inital-scale=1.0,user-scalable=no;"> ``` h5中包含该段代码可保证h5在手机字体与电脑端字体匹配,但不可缩放。后为实现缩放,,将...
  • 手机端应用的CSS字体样式规范

    千次阅读 2019-06-26 11:24:38
    这里整理一下自己通用的字体大小和颜色,方便后续直接使用。 这里是借鉴了微信小程序的视觉规范,主要是用于手机端H5应用、像小程序、uni-app等。 /*只能为阿拉伯数字,金额、时间等,如弹出支付的金额字体大小*/ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,276
精华内容 7,310
关键字:

手机网页字体大小