移动web特殊样式处理

一、高清图片

二、一像素边框

还有一种解决办法:

 1 border-1px($color)
 2   position: relative
 3   &:after
 4     display: block
 5     position: absolute
 6     left: 0
 7     bottom: 0
 8     border-top: 1px solid $color
 9     width: 100%
10     content: ‘‘

三、字体大小,rem  这只是一种解决方法,有时候也用 px

默认设置 html的font-size:62.5%      页面默认的font-size为16px     62.5% = 10/16

这样的话  1rem=10px   1.2rem=12px

四、多行文本溢出

line-clamp表示显示几行

时间: 2024-10-03 14:14:57

移动web特殊样式处理的相关文章

web优化-样式表、脚本

为了避免白屏,应将样式表放在文档顶部的HEAD中.将样式表包含在文档中有两种方式:使用LINK标签和@improt规则.一个stryle块可以包含多个@import规则,但@import规则必须放在所有其他规则之前.@import规则会导致组件下载时的无序性. “如果样式表仍在加载,构建呈现树就是一种浪费,因为在所有样式表加载并拆解完毕之前无需回执任何东西.否则,在其准备好之前显示内容会遇到Flash of Unstyled Content问题.” 对响应时间影响最大的是页面中组件的数量.htt

移动开发--移动web特别样式处理

高清图片:100px*200px的图片 设置100px*100px的大小,会被拉大,变模糊,应该用100dp*100dp(物理像素)去渲染. 一像素边框: 相对单位rem: 多行文本溢出.

最详尽的IntelliJ IDEA项目web项目搭建!!!!!!

一.创建一个web项目(首次创建最麻烦) 1.保证安装好软件 2.双击打开软件-->新建一个项目 3.web项目选择如图,先建立一个空的项目空间来放置你的项目,这是一个区别 相当于myeclipse的如图 4.建立项目的名称 相当于myeclipse的如图 5.点击fininsh,会弹出如图所示,问你建立的项目是在此页显示,还是在新页显示,这个看你的需求,这里以新页为了,以跟我的之前项目区分.(这是一个区别) 6.这时会弹出如图的设置,需要设置使用的JDK,这里叫做SDK 7.如果没有弹出,可以

[转]Android样式的开发:shape篇

转载自Keegan小钢原文链接:http://keeganlee.me/post/android/20150830 Android样式的开发:shape篇Android样式的开发:selector篇Android样式的开发:layer-list篇Android样式的开发:drawable汇总篇Android样式的开发:View Animation篇Android样式的开发:Property Animation篇Android样式的开发:Style篇 一个应用,应该保持一套统一的样式,包括Butt

移动web技能总结

对于作为一名前端开发人员,除了能够编写出满足需求的PC端页面之外,同时也是需要懂得怎么去制作移动web页面,毕竟使用移动设备来操作任何处理称为新时代的趋势,所以学好制作一个移动web时必须滴.于是通过学习和总结,将自己学到的一些技能总结一下! 首先是移动像素,对于px应该都不会觉得陌生,这是css针对浏览器设计的一种逻辑像素,是浏览器使用的抽象单位!dp.pt,江湖人称设备无关像素,也就是设备的物理像素!而dpr,设备像素的缩放比,是px和dp联系的桥梁!有怎么一个计算公式1px=dpr*dpr

HTML5 移动Web

一.本地存储 localStorage sessionStorage Storage事件监听 二.移动Web的离线应用 离线与缓存 ApplicationCache.manifest 三.HTML5表单元素 input search email number range tel url 四.移动Web界面样式 CSS3 属性选择器 伪类选择器 阴影 box-shadow text-shadow 背景 圆角边框 Media Queries 五.Geolocation 地理定位 获取当前位置 监视移

100+ 超全的web开发工具和资源

转载出处:https://xituqu.com/170.html 作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言,并愿意和渴望接受新的挑战,以适应变化.新的挑战可能会包括一些开发上的要求,如利用适应现有的框架来满足业务需求.测试一个网站,能从中知道出了哪些技术上的问题,并且我们针对这些问题进行优化和消除.便于后端的开发进程加快和测试.所以我们列出了完整的web开发所需要的工具和资源,助

超全的web开发工具和资源

作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言,并愿意和渴望接受新的挑战,以适应变化.新的挑战可能会包括一些开发上的要求,如利用适应现有的框架来满足业务需求.测试一个网站,能从中知道出了哪些技术上的问题,并且我们针对这些问题进行优化和消除.便于后端的开发进程加快和测试.所以我们列出了完整的web开发所需要的工具和资源,助力开发者提高开发效率!学不止步,让我们努力成为一个优秀的开发者!

如何修改element.style内联样式;

我们在写前面 web页面样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 element.style的值,这个值还找不到是在哪里出现的,还修改不了. 其实element.style是一种内联样式,很多情况下是在一些JavaScript代码里写死的,这种方法相当不好.但是有些时候,我们在使用第三方js文件时,会遇到.哪么我们如何去修改它呢,在才源代码中   用!important 语法优先权来实现我们想要的效果. 举个例子: 默