移动web前端路上——笔记（1）

解决文字行数限制与美观设计问题
最新推荐文章于 2024-04-21 14:30:45 发布
原创 最新推荐文章于 2024-04-21 14:30:45 发布 · 777 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#移动web

本文探讨了在设计图中遇到的限制文字不超过两行的问题，并提供了使用max-height属性的解决方案，同时讨论了如何判断文字是一行还是两行的逻辑。


遇到这样的设计图，刚开始还真是不知所措，因为要防止他超过两行，所以给字体 line-height 20px  盒子高度 40px，但是在一行的时候会出现空白太多的问题，单是如果要针对一行跟两行来写样式的话，我们怎么去知道文字是一行还是两行?

最后想到的解决方法就是max-height 40px ,完美解决



移动web开发笔记01
JunXian的博客
05-24 383
一， 1， 流式布局：width=100%； 2， Viewport：<meta name="viewport"content="width=device-width,initial-scale=1.0,user-scale=1.0"/>3， 清除点击高亮： 移动端特有的点击链接或者某区域时的高亮 定义高亮颜色： -webkit-tap-highlight-col
web前端javascript笔记——（15）定时器
JLY19970726的博客
01-24 1569
【代码】web前端javascript笔记——（15）定时器。
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 4154
Web前端学习笔记（1）
CSS——前端笔记
最新发布
qq_48721706的博客
04-21 3255
css前端笔记
web前端最全笔记
qqyang_的博客
07-14 4783
#第一章 Web基础知识 Web开发基本概念 1、万维网是一个由许多相互链接的超文本组成的系统，通过互联网访问。 2、web：worldwideweb，万维网，简称web，www，通常称为网页。 3、web开发：进行网页页面制作及其阁下你给功能开发。 4、浏览器：显示网页内容，并让用户与这些文件交互 一种软件。（常用：IE、谷歌、火狐） 5、web服务器：提供web服务的计算机。 6、URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。 组成...
web前端笔记
m0_74148715的博客
02-28 1688
html、css
前端学习笔记 | CSS动画+移动web
m0_53522458的博客
02-01 1163
CSS的平面转换、渐变、空间转换、动画；移动Web两种适配方案。
Web前端笔记记录
yjnlovepy的博客
10-19 4005
web前端开发笔记
WEB前端学习笔记（十二）——移动WEB（响应式布局+bootstrap）
weixin_56370772的博客
09-28 357
能够根据设备宽度的变化，设置差异化样式开发常用写法媒体特性常用写法max-widthmin-width。
web开发技术——课程笔记.rar
03-17
在Web开发领域，前端技术是构建互联网应用的重要组成部分。...本课程笔记将深入探讨这些关键领域的...通过学习以上知识点，你可以掌握Web前端开发的基本技能，从而能够构建功能丰富、交互性强、用户体验优良的网页应用。
前端项目笔记——网易云音乐、通用后台管理
06-15
本文将围绕“前端项目笔记——网易云音乐、通用后台管理”这一主题，深入探讨相关知识点，主要关注Vue.js框架的运用和其他前端技术的整合。 一、Vue.js框架基础 Vue.js是一款轻量级的渐进式JavaScript框架，以其...
web前端大作业-专业健康医疗服务响应式网页模板-界面适配移动设备-HTML源码.zip
04-03
面对大学生朋友们的课程设计和毕业设计挑战，我们精心准备了一份Web前端大作业——一套高效的响应式网站HTML源码文件，它将是您实现学术成就的得力助手！ 这份源码文件不仅包含了丰富的功能和优雅的设计，更是一个...
Web前端——html全面解析笔记
轮回浮华三千的博客
04-26 651
Web前端开发——HTML英文单词编程环境搭建三级目录 英文单词 Hyper Text Markup Language——超文本标记语言（HTML） 编程环境搭建 如无特殊说明，则均在C盘之外的盘和英文输入法下操作。 安装Sublime Text软件，新建一个web文件夹，web文件夹中新建code文件夹，code文件夹中新建5个文件夹分别为css，js，image，music，video。 打开Sublime Text软件ctrl+n新建，ctrl+s保存在code文件夹下，文件后缀名为html。（例如1
手机web遇到的问题及解决方法
牙膏 的专栏
01-23 4613
首先，先说的是我每个项目都会用到的一个模板页，这个我遇到大大小小的坑之后定义好的一个html文件 上面的meta可以帮我避免了好都问题 遇到的问题： 1.苹果手机上面，input控件会有默认的样式 解决 /*去掉苹果手机端web按钮默认样式，解决按钮默认圆角问题*/ input[t
谷歌浏览器 fixed 出现bug
牙膏 的专栏
01-27 885
在谷歌浏览器，当页面有css3 animation 且有 fixed块的时候，fixed块在页面滚动的时候会出现fixed块闪动 这种bug算是页面交互渲染这类问题，试着触发浏览器的重绘。 webkit/blink内核渲染bug修复神器，webkit 的 haslayout:    -webkit-transform:translateZ(0); 完美搞定。
background 笔记1
牙膏 的专栏
09-09 762
1.background-size:auto || || ||cover ||cantaincover: 放大铺满，但会使图片失真 contain:保持北京图片本身的比例，将图片缩放至宽或者高正好适应所定义北京容器区域支持 IE9+ Firefox3.6+ chrome 4.0+ oprea 10+ sarfri 3+2.background-break:bounding-box || ea
js、ios交互的一点小问题
牙膏 的专栏
02-28 743
第一次接触 这 所谓的 “混合开发” ，困难的地方在js 与 android ios交互这块 自己定义了一个接口文档给两个开发组，例如：接口名称：TestInteractive，js调用原生方法：test1(),  test2(str1); test1因为没参数，所以 android 跟ios 都没问题，都可以调用得到，但是test2(str1)是有参数的，android的定义跟js一样，参数
今天不忙，看了下DOM，无聊写写记记（详细的是笔者之前没主要的，不详细和缺少的是了解的）
牙膏 的专栏
01-23 642
document对象 1.document.documentElement==document.childNodes[0]=document.firstNode     取到对的引用 2.document.body  取得对的引用 document 是 HTMLDocument  的实例对象，document对象有一些标准Document对象没有的属性 docume
前端笔记——记录重要的技术要点
资源摘要信息:"前端笔记" 在当今快速发展的信息技术领域中，前端开发扮演着至关重要的角色。它指的是构建用户在互联网上看到和与之交互的网页或应用的界面部分。前端开发者需要精通HTML（HyperText Markup Language...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值