精华内容
下载资源
问答
  • 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;
    }

    展开全文
  • css 用的统一的样式 为什么字体不一样大![图片说明](https://img-ask.csdn.net/upload/201704/13/1492067761_909382.png)
  • 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制作手机端网页字体大小

    展开全文
  • 手机端h5页面字体大小适配

    千次阅读 2019-06-24 19:15:00
    为解决适安卓手机跟苹果手机字体大小和高度不一致的问题; 首先设置初始字体:由于浏览器默认(因为1em=16px,所以0.625em=10px); 设置初始字体大小为62.5%;然后根据不同的屏幕尺寸计算相对应的百分比; 代码...

    为解决适安卓手机跟苹果手机字体大小和高度不一致的问题;

    首先设置初始字体:由于浏览器默认(因为1em=16px,所以0.625em=10px);

    设置初始字体大小为62.5%;然后根据不同的屏幕尺寸计算相对应的百分比;

    代码如下:

    html,
    body {//安卓默认360
    width: 100%;
    font-size: 62.5%;
    }

    @media only screen and (min-width: 320px) {iphone5
    html,
    body {
    font-size: 55.556% !important;
    }
    }
    @media only screen and (min-width: 360px) {//一般安卓手机
    html,
    body {
    font-size: 62.5% !important;
    }
    }
    @media only screen and (min-width: 375px) {//iphone6/7/8
    html,
    body {
    font-size: 65.10417% !important;
    }
    }
    @media only screen and (min-width: 414px) {//iphone6/7/8 plus
    html,
    body {
    font-size: 71.875% !important;
    }
    }
    @media only screen and (min-width: 768px) {//ipad
    html,
    body {
    font-size: 133.3333% !important;
    }
    }
    @media only screen and (min-width: 1024px) {//ipad pro
    html,
    body {
    font-size: 177.77778% !important;
    }
    }

    最后使用的时候:

    px换算成rem,就能实现不同设备展示的字体大小及尺寸相差不大。

    注:属个人总结性文档,勿喷~

    转载于:https://www.cnblogs.com/cyeldxlz/p/iaFontsize.html

    展开全文
  • 安卓手机系统设置字体大小后与APP以及web端字体大小问题最近在做一些有关html和App的一些混合式开发,在测试过程中发现,android手机系统设置了字体大小,app应用中和web服务端的页面(也就是html界面)字体都会有...

    安卓手机系统设置字体大小后与APP以及web端字体大小问题

    最近在做一些有关html和App的一些混合式开发,在测试过程中发现,android手机系统设置了字体大小,app应用中和web服务端的页面(也就是html界面)字体都会有变化。下面我就在这次开发者中遇到的相关问题进行一个小小的总结。

    1.情况发生,设置系统字体之后的前后对比
    这里写图片描述
    这里写图片描述
    是不是发现字体变化还是很大的呢!

    web端html和入app中,有些会出现兼容问题,有些机子并不会出现兼容问题。实际开发中,对于android的同学来说,只要有超过三种有这种问题就需要进行解决这个问题。小编在网络上找了很多的资料,发现,网络就是一个大杂烩,什么都有,但是有用的却很少,如何解决这个问题呢?其实并没有那么麻烦。

    2.问题研究
    1)app中字体大小不随着系统设置字体大小而改变是很容易的,但是需要确定您之前已经做过兼容测试,您的布局不会有兼容问题,也就是默认的系统设置的时候,也就是字体放大倍数为1.0的时候,不会有布局问题
    这个时候只需要加入两行代码就能够轻松的解决这个问题,这个也是百度中就可以找到的。这里小编也只是做了一个代码的搬运工

            //防止字体被从新设置
            DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
            displayMetrics.scaledDensity = displayMetrics.density;

    小编并不喜欢重复操作,所以我直接在环境类中加入了代码,代码如下

    public class MyApplication extends YTBaseApplication {
    
        @Override
        public void onCreate() {
            super.onCreate();
            //防止字体被从新设置
            DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
            displayMetrics.scaledDensity = displayMetrics.density;
            CrashHandler.getInstance().init(this);
            init();
        }

    是不是恨简单呢!

    2)web端界面放入APP兼容问题
    查了一些相关资料,发现都写的比较麻烦,并且不能够解决相关的问题,还好小编之前有做过web端html界面App兼容,顾发现,并没有百度回答的那么麻烦

    从理论角度想就是你设置字体大小就是把当前的html界面字体的放大缩小倍数,顾我们只需要让我们的webview这个view’控制html的放大倍数为1.0,很多人知道也就是默认的大小就行,具体代码如何写呢!

            WebSettings webSettings = webView.getSettings();
            webSettings.setTextZoom(100);

    是不是发现其实超级简单呢!

    希望本人的这篇文章对大家有用。未来的日子一起努力。

    展开全文
  • 手机端应用的CSS字体样式规范

    千次阅读 2019-06-26 11:24:38
    这里是借鉴了微信小程序的视觉规范,主要是用于手机端H5应用、像小程序、uni-app等。 /*只能为阿拉伯数字,金额、时间等,如弹出支付的金额字体大小*/ .font40pt { font-size: 40pt; } /*页面大标题字体大小...
  • 求大佬解答为什么手机端字体这么小,我该怎么改?? ![图片说明](https://img-ask.csdn.net/upload/202009/01/1598949606_984042.jpg)
  • 手机端自适应字体大小和元素宽度自适应 以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。 这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义,media定义好之后,拿起键盘就是干...
  • h5手机端适配字体设置

    千次阅读 2019-09-18 14:09:27
    前言 ... //rem为html字体大小 通过改变html字体大小达到适配的效果 remChange(); //监听屏幕改变resize事件 触发remChange方法 window.addEventListener("resize", remChange) function r...
  • 移动端适配,可根据设置html 标签字体大小和 使用rem 单位 可在主页面内引入一段js代码,动态监测设备的尺寸,动态改变html字体大小。代码如下: 下面展示一些 `内联代码片`。 // 动态设置HTML 字体大小, 一段...
  • 1. 目的:实现h5网页在手机端即可缩放且字体与电脑端字体匹配 ...h5中包含该段代码可保证h5在手机端字体与电脑端字体匹配,但不可缩放。后为实现缩放,,将user-scalable=no改为yes后仍不可缩放,求解?
  • 手机端字体判断

    2017-10-23 11:33:34
    <html 写行内样式 定字体大小
  • css webapp手机屏幕适配字体大小

    万次阅读 2018-03-07 15:02:13
    以下这段代码作用是,设置屏幕最大宽度640px,水平居中,以及不同屏幕下字体大小。可以将此放进common.css中使用: @media only screen and (min-width: 640px) { html { font-size: 32px; background: #8cbc...
  • 手机网页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=...
  • 解决HTML5手机端字体小的问题。

    千次阅读 2016-02-04 15:15:47
    解决HTML5手机端字体小的问题。关键下下面的前2行内容 这样,在手机上显示的字体大小才正常
  • 移动端自适应布局与字体大小

    千次阅读 2020-04-10 10:33:03
    移动端自适应布局与字体大小 vw, vh实现 vw:根据可视区的宽度来计算的,100vw相当于宽度为100%,10vw则相当于10%。 vh:根据可视区的高度来计算的,和vw换算方式一样。 font-size:10vw。如果浏览器可视区宽度为...
  • 关于移动端页面在手机调整字体大小后内容适配的问题,作为新手我也刚好是第一次遇到, 已经完成的移动端页面,正常情况下在手机上的浏览器和App都可以正常显示,可当测 试把手机字体调大后,布局就忽然变乱了....
  • 一、用户修改手机字体设置大小,影响App里打开的web页面。 手机字体设置大小,影响App的页面。 Android的可以通过webview配置webview.getSettings().setTextZoom...// 用原生方法获取用户设置的浏览器的字体大小(兼容i
  • pc端字体大小自适应几种方法

    千次阅读 2018-11-16 10:39:00
    // 手机窗口的高度   var wW = window.innerWidth; // 手机窗口的宽度   var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值   $( 'html' ).css( 'font-size' , ...
  • 对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端...
  • 【css】移动端自适应布局与字体大小自适应

    万次阅读 多人点赞 2018-06-04 10:43:30
    前言:前面已经说过【css】移动端响应式布局与设置响应式字体大小,但是移动自适应布局跟自适应字体大小该怎么进行设置呢?   一、vw, vh vw它是根据可视区的宽度来计算的。 vh它是根据可视区的高度来计算的。 ...
  • 最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致。大家可以查看这个Demo(记得打开Chrome DevTools)。 就如上图所示,你可以发现,原本指定的字体大小是24px,...
  • 主要解决PC端和手机端字体显示不一致的的问题: 主要是在head标签里面添加几个meta页面 添加的meta标签如下 <meta http-equiv="Content-Type" content="text/html"/> <meta name="viewport" content=...
  • 这里主要设置的是html的根字体大小,需要进行body的字体大小的初始化,我一般设置 font-size:14px ,否则会导致页面的部分字体变大; 这里的是页面的初次加载的时候进行引入初始,但不推荐 window.addEventListener...
  • 网页开发习惯的px单位,手机html开发不适用。源代码如下:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &...
  • <div class="markdown_views"><h1 id="解决因为手机设置字体大小导致h5页面在webview中变形的bug"><a name="t0" target="_blank"></a>解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5...
  • 例: test hello world 像这样,就可以做到自适应布局跟自适应字体大小了,不过有个弊端是这时候高度跟宽度都跟随设备大小变化,也跟随浏览器大小变化,不能像响应式布局那样去控制最大宽度,最大高度,跟字体大小...
  • 大屏幕,可以设置大的字体单位,小屏幕设置小的字体单位。一举解决了百分比定位和flex布局的遗留问题。 rem优点:做到了“完美适配” rem缺点:只是等比放大,小屏下字体小,大屏下字体大。 上面是根据高度来确定...
  • 移动端html5手机网站字体单位font-size选择px还是rem 分为两种情况: ①对于只需要适配手机设备,使用px就可以了   ②对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,944
精华内容 5,177
关键字:

html手机端字体大小