font-size | 易学教程

pc全屏网页布局小技巧

阅读更多关于 pc全屏网页布局小技巧

今天又写了一个全屏网页，其实之前也写了很多次，一直都没有总结，今天在这里总结出来的小技巧记录一下。pc的设计图一般都1920的，但是还有很多小屏，比如自己的笔记本就是1366，如果说完全按照设计图的尺寸布局，那放在小屏幕上浏览时总会有一些地方不协调，字体过大，图片过大，间距过大。下面就以今天的网页为例解析一下遇到的情况。 1、字体不协调的问题这个时候em这个单位就很用。我们pc端布局通常习惯使用px,px大小是固定的，而em大小不是固定的，em会继承父元素的字体大小，比如父元素的font-size为16px,其子元素的font-size为1em,那这个时候子元素的font-size换算过来就是16px，所以这时16px=1em,如果父元素font-size为20px,那这时1em=20px,em会随父元素font-size变化而变化。先看代码： .banner{ height: 634px; background: url(../images/banner_01.png) no-repeat center center; width: 100%; color: #992422; font-size: 14px; .title1{ font-size: 3.85em; padding-top: 125px; font-family: wending; word-spacing:

移动端H5开发的屏幕适配方案

阅读更多关于移动端H5开发的屏幕适配方案

移动端屏幕的几个概念 1、什么是dpr？ dpr: device pixel ratio 设置像素比 —— dpr=物理像素/设备独立像素。设置独立像素：密度无关像素，个人理解：设备的实际屏幕大小物理像素：设备像素，显示设备中一个最微小的部件，个人理解：针对iphone retina屏幕，2倍的即屏幕用2px点来显示css为1px的内容，3倍的同理 2、获取设备dpr值 js获取方式： window.devicePixelRatio Css获取方式： -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio （通过这个三个进行媒体查询，可对不同的dpr设置做一些样式适配，如对1px边框的处理问题上） 3、rem单位 rem: fontsize of root element 即相对于根标签 html的大小。例如当设置了html的font-size时为12px时，其他元素设置1rem则代表12px。屏幕适配的方案 1、简单版屏幕适配（windowWidth/设计稿宽*100） ——*100为了方便计算。即font-size值是手机deviceWidth与设计稿比值的100倍 document .getElementsByTagName( 'html' )

移动端屏幕适配的解决

阅读更多关于移动端屏幕适配的解决

随着手机硬件配置的飞速增长、屏幕尺寸的越来越大和网络带宽的逐渐提升，越来越多的PC业务和服务在向移动端转移。然而在这移动端的时代，为了处理各终端屏幕的适配，是否乱了手脚呢？https://hzzly.github.io/2017/03/15/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B1%8F%E5%B9%95%E9%80%82%E9%85%8D%E7%9A%84%E8%A7%A3%E5%86%B3/ 虽然移动端的页面与PC的页面相比简单了不少，但让我们头痛的事情还是要想尽办法让页面能适配众多不同的终端设备。在前几个外包项目中，我做的主要都是移动微信端的。期间也遇到了不同屏幕大小的适配问题，所以今天特来分享一下我的解决方法。项目地址： https://github.com/hzzly/xyy-vue demo地址： http://hjingren.cn/xyy-vue/ 欢迎大家的star啦~ 一、meta标签 meta之viewport，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要在html中设置meta标签如下： 1 < meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0,

邮件中如何写html

阅读更多关于邮件中如何写html

StringBuilder stringBuilder = new StringBuilder();利用StringBuild对象将写好样式的表单或者表格用append方法添加，最后用stringBuilder.toString()方法即可转为实际页面注意将所有值的空格全部替换成" "否则，有空格的值无法读取完整信息。 stringBuilder.append( "<body style=\"background:#CEFFCE\">\n"+ "<form>\n"+ "<div style=\"text-align:right\">\n"+ "<label style=\"font-family:微软雅黑;font-size:13px\">Date Reported:</label><input type=\"text\" style=\"width:400px;margin:3px 0px 3px 0px\" value="+((String)param.get("RPT_DTE")).replace(" ", " ")+"><br/>\n"+ "<label style=\"font-family:微软雅黑;font-size:13px\">Your Name:</label><input type=\"text\" style=\"width:400px;margin

移动端网页中文字大小的设定

阅读更多关于移动端网页中文字大小的设定

最近在做移动端的网页，类似于web app的小应用。发现文字大小这块开始的时候不知道改怎么设定。查了网上的质料，发现有些用px单位，有些用em单位的，但是少部分用的是rem单位。而我做的是使用jQUery mobile 框架来弄的。所以使用em作为单位。当然有时候在处理距离的时候还是用了px单位。也用了%单位，和em单位。我大概认为的几点：如果是以这个文字大小的话，body{ font-size:62.5%;} ,那么 12px=1.2em; 1em=16px; 做移动端的话就不需要引入头部：相反的，如果页面的头部引入了上面的，那么我认为设置字体大小为：body{ font-size:100%;} 然后针对p:1em; 等设置字体大小。但是可能会看到当屏幕分辨率变大的时候，想要字体也出现随着屏幕分辨率变大的话，那么就需要多媒体设置：如下： @media screen and (max-width:360px){body{font-size:12px}} @media screen and (min-width:360px){body{font-size:13px}} @media screen and (min-width:400px){body{font-size:15px}} @media screen and (min-width:480px){body{font

移动端字体设置rem。和兼容。

阅读更多关于移动端字体设置rem。和兼容。

移动端字体单位font-size选择px还是rem？一：做少部分手机适配可以用px。二：当要适配各种手机端设备时用rem。 *二： 1.使用rem来设置Web页面的字体大小； 2.rem是相对于根元素<html>； 3.rem能等比例适配所有屏幕 4.在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）；引入css代码如下： html { font-size : 10px } @media screen and (min-width:321px) and (max-width:375px) { html{font-size : 11px } } @media screen and (min-width:376px) and (max-width:414px) { html{font-size : 12px } } @media screen and (min-width:415px) and (max-width:639px) { html{font-size : 15px } } @media screen and (min-width:640px) and (max-width:719px) { html{font-size : 20px } } @media screen and

移动端根据设备大小设置字体大小（居于案例的理解扩展）

阅读更多关于移动端根据设备大小设置字体大小（居于案例的理解扩展）

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){

解决因为手机设置字体大小导致h5页面在webview中变形的BUG

阅读更多关于解决因为手机设置字体大小导致h5页面在webview中变形的BUG

解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先，我们做了一个H5页面，在各种手机浏览器中打开都没问题。我们采用了 rem 单位进行布局，通过JS来动态计算网页的视窗宽度，动态设置 html 的 font-size ，一切都比较完美。这时候，你自信满满的将 h5 地址交给了APP工程师，做了一个 WEBVIEW 嵌套，然后就顺利交工了。测试组在一堆手机中测试 APP ，突然，在某个手机上打开，你的页面布局了乱了，字变大或者变小，总之很奇葩。你怀疑是 APP 的问题，但是客户端死活不承认。你在该手机浏览器中查看，确保没有一毛钱问题，也死活不承认是你的问题。于是测试人员对你俩不死不休的要求修改。于是，客户端给你加了调试工具后，你打开 chrome 进行调试，发现一个非常非常奇葩的问题：我明明设置的 html 字号是 100px ，为什么在 APP 中就变成了 86 （或者其他数字），你找遍所有的代码，都没有发现这个 86 是从哪里来的，你快疯了！！找了N多人帮忙，都没能解决这个问题！！我很希望能够告诉你，赶紧来看我这篇博文，因为，你现在经历的一切，我TM刚刚经历过~~ 好，你怎么也不会想到是手机设置字体大小造成的。因为默认浏览器中的内容是不受系统字体大小设置控制的，至少我遇到的几台手机都是这样的情况。但是APP不一样，APP是受那个玩意儿控制的！！

移动端Web页面适配方案

阅读更多关于移动端Web页面适配方案

移动端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元标签控制布局

干货！web页面完美解决自适应的问题

阅读更多关于干货！web页面完美解决自适应的问题

版权声明：本文为章鱼哥原创文章，若要转载，请注明出处 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

订阅 font-size