font

1、问题描述： 拿到公司里以前写好的网页查看，发现它的CSS中有这样一些东西： /*设备竖屏时的样式*/ @media all and (orientation : portrait){ .video_bg{ position:fixed; z-index: -9999; width: 100%; background: #469BD4; } } /*设备横屏时的样式*/ @media all and (orientation : landscape){ .video_bg{background: #A900B1; position: fixed; right: 0; bottom:0; z-index: -9999; width: 100%; height: 100%; } } @media only screen and (min-width:320px) and (orientation:portrait){ html{font-size:100%;} } @media only screen and (min-width:360px) and (orientation:portrait){ html{font-size:125%;} } @media only screen and (min-width:400px) and (orientation:portrait){

移动端Web页面适配方案 移动端字体大小 移动端适配 移动端web bolelee 3月20日发布 赞 | 6 收藏 | 67 6.3k 次浏览 更新：完整 js 代码和 sass mixin 已上传于gitHub， 点击此处可获取 =================================================== 移动端Web页面，即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。 适配的目标 引用一文章的描述： 在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。 概念理解 在做适配之前，需要先理解一些概念。对于不理解的地方，可以搜索更多文章看看，本文总结的也是摘抄了其他文章的描述，本文末有附相关链接。 viewport视口 viewport是严格的等于浏览器的窗口。 viewport 与跟 viewport 有关的 meta 标签的关系，详细建议读一读这篇文章： 移动前端开发之viewport的深入理解 ， viewport 与布局的关系，可以看下这篇文章： 在移动浏览器中使用viewport元标签控制布局

版权声明：本文为章鱼哥原创文章，若要转载，请注明出处 https://blog.csdn.net/qq_40388552/article/details/84838474   前段时间做了一个大数据前端页面显示的项目，使用了如下的简单的方式来解决页面自适应的问题，码友们如果有更好的方法欢迎留言。 采用的方案核心的3个步骤 采用 bootstrap的的网格系统 来进行页面布局划分。要实现自己想要的页面效果就需要结合百分比和div嵌套来实现，这都是基础哈。 整个页面的宽度width和高度height都采用 百分比 的形式来设计，从一开始的html标签开始到body里面的内容层层递进都设置上百分比。 注意： 当你发现对某个元素设置的百分比没有起作用时，这是因为百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。 字体如何去做自适应我采用的是使用 Css3的@media 查询 ，通过@media可以针对不同的屏幕尺寸设置不同的样式，我们这里对字体的样式进行修改，于是我在style标签中写了类似如下的一串代码，来改变body的字体大小,你也可以把它写成css文件然后引入到网页中。 @media screen and (max-width: 1920px) { body { font-size: 16px;} } @media screen and (max

meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？ 不急，我们先往下面看，这里先留个悬念。 几个专有名词和单位 这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。 首先，先来看一下 物理像素 。 以iphone6为例，可知道： 分辨率 ：1334pt x 750pt 指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。 屏幕尺寸 ：4.7in 注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。 屏幕像素密度 ：326ppi 指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时， 屏幕像素密度 = 分辨率 / 屏幕尺寸 接着，我们来看一下其他的单位。 设备独立像素 ：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是， 物理像素 开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。

1.标明浏览器视窗 <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 2.使用rem 或者em而不使用px function auto(){ var width = $('body').width(); var font_size = 0.8+'rem';//设置默认字体大小 //var font_size2 = (width

一、基础概念 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr 是什么意思？ 移动端H5解惑-概念术语（一） 二、为什么要做页面适配 2.1 PC端为什么要解决浏览器兼容 因为在PC端，由于浏览器种类太多啦，比如几个常用的：IE、火狐、Chrome、Safari等。同时，由于历史原因，不同浏览器在不同时期针对当时的WEB标准有一些不一样的处理（虽然大部分一样），比如：IE6、IE8、IE10+等对于一些JS事件处理、CSS样式渲染有所不同。 而恰恰又有一些人在使用着不同类型的浏览器，以及不同浏览器的不同版本。所以，为了能让你的网站让这些不同的人看到效果一致，你就不得不做兼容，除非这些人不是你的目标用户。 2.2 移动端为什么要做适配 在移动端虽然整体来说大部分浏览器内核都是webkit，而且大部分都支持CSS3的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。 另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑）（详情），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示 一致。 一致是什么意思？就是下面提到的几个主要解决的问题。 三、页面适配主要解决的问题 元素自适应问题 文字rem问题

方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：

之前看过一篇文章 《 Porteus 安装配置手记 》 http://my.oschina.net/kingmc/blog/136375 ， Porteus 简介请见（ http://www.oschina.net/p/porteus ） 非常快的版本，界面友好也易用，可以 现在已经出到 3.0 ，基于 slackware 发行版 (http://mirrors.163.com/slackware) 1、 下载 PORTEUS 3.0 下载地址， http://dl.porteus.org/i486/current/ ，建议全部下载下来， Parent Directory / - Directory drivers / 2014-Mar-31 18:07:36 - Directory extras / 2014-Mar-11 17:11:55 - Directory modules / 2014-Mar-17 19:15:17 - Directory packages / 2014-Mar-11 17:11:55 - Directory Porteus-KDE4-v3.0-i486.iso 2014-Mar-12 17:27:17 196.9M application/iso-image Porteus-LXDE-v3.0-i486.iso 2014-Mar-12 17:27:17

windows phone的默认字体是Segoe WP(Segoe UI), 但是这个字体包含的字符非常少, 在WP7里, 只有几十KB, 虽然在WP8增加了很多字符, 但是还是很难满足开发的应用. 开发过程中, 如果需要显示一些特殊字符, 类似于表情, 颜文字等, 如果 直接使用Segoe字体, 或者系统自带的字体, 会不能正常显示, 都显示成了口 口 . 比如: ಥ_ಥ ಠ_ರೃ 这 些. 示例代码: <TextBlock TextWrapping="Wrap" Text="你好世界(ﾟ∀ﾟ)ಥ_ಥಠ_ರ" /> 截图: 解决办法: 嵌入自定义字体 . 在visual studio中, 添加一个ttf字体, 并将生成操作改成: 内容 代码: <TextBlock FontFamily="/FontTest;component/Fonts/Nirmala.ttf#Nirmala UI" Text="你好世界(ﾟ∀ﾟ)ಥ_ಥಠ_ರ" /> 注意, FontFamily必须是带组件名的完整路径.(好像有时候也不用是完整路径..试一试吧.. 或者, 使用Blind: 1. 选择控件, 查看属性, 选择一个字体, 然后勾选"嵌入": Blend生成的代码: <TextBlock TextWrapping="Wrap" Text="你好世界(ﾟ∀ﾟ)ಥ_ಥಠ_ರ" FontFamily="

驱动安装 佳博打印机 在佳博官网下载驱动包，要和自己的机型匹配。我使用的是GP-3120TU打印机，驱动包如下： 点击安装，选择GP-3120TU 设置打印机端口 使用连接线选择usb端口，完成后可以打印空白页进行测试。刚开始的时候因为找不到连接线，我使用笔记本蓝牙进行连接，选用串口com4连接，也可以进行打印。 得力打印机 下载驱动，配置端口，安装驱动。 后台 pom.xml <dependencies> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.52</version> </dependency> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>1.2.17</version> </dependency> <!-- 谷歌二维码--> <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>3.3.0</version> </dependency> </dependencies> 二维码 public class