电子商务网站开发基本流程图,北京网站设计开发公司,高端网站定制公司,重庆seo计费管理问题
我们在项目开发过程中有时候会遇到设计师给的小于12px的字体#xff0c;IE、火狐浏览器、移动端等小于12px的字号大小还是可以正常显示的#xff0c;但是谷歌浏览器上显示字体最小为12px#xff0c;css设置font-size#xff1a;10px#xff0c;运行代码显示结果仍然…问题
我们在项目开发过程中有时候会遇到设计师给的小于12px的字体IE、火狐浏览器、移动端等小于12px的字号大小还是可以正常显示的但是谷歌浏览器上显示字体最小为12pxcss设置font-size10px运行代码显示结果仍然是12px大小那么这个我们怎么去解决呢 使用缩放 transform: scale()是CSS中的一个用于缩放元素的属性。它的语法如下
transform: scale(x,y);
其中x和y是缩放比例。如果只设置一个参数则元素将等比例地缩放。 当x和y都设置为1时元素的大小将不会改变。
要放大元素您可以设置x和y的值大于1例如
transform: scale(1.5);
那么我们就可以使用缩放属性来等比缩小字体我们给文本设置字体12px并设置缩放值为10/120.83333也就是transform:scale(0.83)如果要设置8px那就是8/120.66666
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title设置浏览器显示小于12px以下字体/title
/head
style.box1 {font-size: 12px;}.box2 {font-size: 12px;transform: scale(0.83333);}.box3 {font-size: 12px;}.box4 {font-size: 12px;transform: scale(0.83333);display: block;}
/stylebodydiv classbox1我是div标签12px的文字大小/divdiv classbox2我是div标签10px的文字大小/divspan classbox3我是span标签12px的文字大小/spanspan classbox4我是span标签10px的文字大小/span
/body/html 注意点1上面我们看出缩小只对有宽高的标签有效所以使用span等行内标签时还需要将行内标签进行元素转换为块元素display:block;。
注意点2文本进行缩放后并不会改变其原来盒子的大小只是视觉上改变了大小也就是说如果文本有换行的时候它进行缩放后仍然是折行显示这显然不符合我们要求所以我们还需要强制文本在一行显示也就是 white-space: nowrap; 那么我们发现缩小了但是没有对齐这个该怎么去解决呢
设置transform-origin0 0
默认缩放中心点是在盒子的正中心所以如果我们需要文本左对齐就需要改变中心点也就是transform-origin0 0该值有两个参数值第一个是水平方位值第二个是垂直方位值对应的如果需要右对齐、或者是有缩进那就改变对应的参数值即可。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title设置浏览器显示小于12px以下字体/title
/head
style.box1 {font-size: 12px;width: 200px;background: beige;}.box2 {font-size: 12px;background: beige;width: 200px;/* 缩小设置 */transform: scale(0.83333);/* 不换行设置 */white-space: nowrap;/* 对齐设置 */transform-origin: 0 0;}
/stylebodydiv classbox1我是12px的文字大小我是12px的文字大小/divdiv classbox2我是10px的文字大小我是10px的文字大小/div
/body/html 这种缩放方式优点是单行、多行文本都可使用缺点是视觉效果变小并不会改变盒子的实际占位在对齐其他盒子时不太友好。欢迎在评论区交流。
如果文章对你有所帮助❤️关注点赞❤️鼓励一下博主会持续更新。。。。 我的博客前端小阳仔_Html,CSS,JavaScript,Vue,React,Angular领域博主 往期回顾 CSS多栏布局-两栏布局和三栏布局 border边框影响布局解决方案 css 设置字体渐变色和阴影
css 重置样式表Normalize.css css实现元素居中的6种方法
Angular8升级至Angular13遇到的问题
前端vscode必备插件(强烈推荐)
Webpack性能优化
vite构建如何兼容低版本浏览器
前端性能优化9大策略面试一网打尽
vue3.x使用prerender-spa-plugin预渲染达到SEO优化 vite构建打包性能优化 vue3.x使用prerender-spa-plugin预渲染达到SEO优化 ES6实用的技巧和方法有哪些 css超出部分显示省略号
vue3使用i18n 实现国际化
vue3中使用prismjs或者highlight.js实现代码高亮
什么是 XSS 攻击什么是 CSRF什么是点击劫持如何防御
