font-size

rem移动端适配

由 北慕城南 提交于 2020-01-14 00:14:44
rem作为一个低调的长度单位，由于手机端网页的兴起，在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下，通过 等比缩放 的方式达到设计图要求的效果。 rem 的官方定义『The font size of the root element.』，即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素，所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配，但实际情况真有这么简单吗？ 首先我们来看看使用 rem 实现手机屏幕适配的常用方案。 以设计稿的宽度为 640px ，即： designWidth = 640 ，同时设定在640px屏宽下 1rem=100px ; 设置 1rem=100px 的优点不言而喻。前端开发者在切图、重构页面的时候，通过直接位移小数点的方式，就可以将UI图中测量到的 px 值换算成对应的 rem 值，方便快捷。 此外，在 head 中我们还设置了：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> 下面给出几个方案： 1. @media screen and (min-width: 320px) {html

laravel - 邮件发送网页形式

由 吃可爱长大的小学妹 提交于 2020-01-13 16:01:05
发送邮件，以网页的形式，图片手动更改为base64，邮件发送使用PHPMailer //html mail.blade.php <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .mailview { width: 650px; text-align: center; } h1 { padding-top: 110px; font-size: 40px; } .p1 { padding-bottom: 40px; font-weight: bold; font-size: 16px; } hr { color: #f0f2f4; width: 80%; } .p2 { padding-top: 40px; font-size: 14px; } .p3 { font-size: 14px; } .p4 { padding-top: 80px; padding-bottom: 60px; } a { display: inline-block; padding: 10px 28px; font-size: 12px; font-weight: bold; text-align: center;

HTML5 & MUI 界面样式

由 流过昼夜 提交于 2020-01-13 13:25:05
什么？这是要做前端的节奏吗？只要公司有需要，我分分钟变身、前端、美工、UI、交互、后端、数据库管理员......快速学习、快速响应，快速适应。公司需要我干啥，我就干啥，而我存在于公司的意义就是利用所学的东西帮公司解决问题......事实上，如果让一个人来搞定整个项目包括移动端、PC端等等，那你还不是被逼得啥都会。 垂直居中+自动换行 样式效果如下所示，当文字没有超出一行时，显示如“备注信息”，当文字超出一行时，显示如“维修地点” HTML代码如下： <div class="mui-input-row multi-line"> <div class="box label-right"> <div class="div-leftauto">维修地点</div> <div class="wrap">广东省深圳市南山区西丽街道桃源路1001号</div> </div> </div> css样式如下： /*不固定高宽div垂直居中的方法：其它页用*/ .box {width: 100%;height: 40px;border: 1px solid #FFF;display: table;margin-right:5px;} .wrap{display: table-cell; vertical-align: middle; width: 100%;padding: 6px 0px;line

How to control print font size

由 六眼飞鱼酱① 提交于 2020-01-13 09:02:16
问题 I am allowing my users to print but the output is way too large (I have to manually adjust to about 60% in the print dialog). I use a css media query (below) to control the content and have tried changing the font-size of the html, body{} without any change to the output font size. Printing to Adobe PDF prints correctly Any ideas what I am doing wrong? My Print Link: <a href="#" onclick="window.print(); return false;"></a> My css: @media print { body * { visibility: hidden; } .printme,

Extract text from PDF in respect to formatting (font size, type etc)

由 陌路散爱 提交于 2020-01-13 06:58:21
问题 Is possible to extract text from PDF file in respect to specific font/font size/font color etc.? I prefer perl, python or *nix command line utilities. My goal is to extract all headlines from PDF file so I will have nice index of articles contained in single PDF. 回答1: Text and /font/font size/position (no color, as I checked) you can get from Ghostscript's txtwrite device (try -dTextFormat=0 | 1 options), as well as from mudraw's (MuPDF) with -tt option. Then parse XML-like output with e.g.

In Win7 some fonts don't work like they did in Win2K/XP

由 眉间皱痕 提交于 2020-01-12 18:52:13
问题 My question is about how font handling needs to be changed in order to work correctly under Windows 7. I'm sure that I've made an assumption about something that was valid before, but is no longer valid. But I don't even know where to begin looking! I'm praying someone can help! Here are the details as I understand them (I've also posted this question on a Microsoft Windows Developers forum, but they're not answering): Yes, I'm behind the times (heck, I still write WIN32 code in plain C!) I

Changing FontSize relationally to the windowsize with WPF?

由 橙三吉。 提交于 2020-01-12 18:18:32
问题 Is it possible, that the FontSize getting smaller if I shrink the window and getting bigger if I enlarge the window? 回答1: Wrap your text inside a Viewbox . <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> <Viewbox> <TextBlock Text="Sizes to fit!"/> </Viewbox> </Window> 回答2: I've never tried this, but I imagine you can bind the font size property of your text to the window size through a converter method. I wouldn't try to bind directly, as that way madness lies. The

Resize font depending on string length

由 那年仲夏 提交于 2020-01-12 12:15:50
问题 I have a vertical menu and i want to make it localizable, but localized strings in menu elements often goes out off the edge. So the question is how to make font resizable depending on the string length in CSS. And if possible, without JavaScript. Thanks! UPD: JQuery isn't acceptable. Any way in Pure JS? 回答1: You should make familiar with using plugins, they save you much time and of course they're very reliable (they are written by experienced scripters/programmers and have been tested by

Resize font depending on string length

由 ぃ、小莉子 提交于 2020-01-12 12:15:10
问题 I have a vertical menu and i want to make it localizable, but localized strings in menu elements often goes out off the edge. So the question is how to make font resizable depending on the string length in CSS. And if possible, without JavaScript. Thanks! UPD: JQuery isn't acceptable. Any way in Pure JS? 回答1: You should make familiar with using plugins, they save you much time and of course they're very reliable (they are written by experienced scripters/programmers and have been tested by

不难懂------适配移动端flexible

由 别等时光非礼了梦想. 提交于 2020-01-12 03:51:27
基于 vue-cli 配置手淘的 lib-flexible + rem，实现移动端自适应 安装 flexible npm install lib-flexible --save 引入 flexible 在项目入口文件 main.js 中添加如下代码，引入 flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader, 自动将 px 转换为 rem 安装 px2rem-loader npm install px2rem-loader --save-dev 配置 px2rem-loader 在 vue-cli 生成的文件中, 找到以下文件 build/utils.js, 如下添加配置 const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 // 1rem=多少像素 这里的设计稿是750px。 } } function generateLoaders(loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] if (loader)
订阅 font-size