老师<input type="submit">咋设置value,同时...

老师<input type="submit">咋设置value,同时...

http://img1.sycdn.imooc.com//climg/5dbd8301098d463d07800228.jpghttp://img1.sycdn.imooc.com//climg/5dbd831309e2825403350181.jpg

然后我换了button设置font-size为10px,然后f12显示

http://img1.sycdn.imooc.com//climg/5dbd834a09a231aa03410106.jpg

这算个啥,设置了没有效果吗?导致我的几个文字换行了

http://img1.sycdn.imooc.com//climg/5dbd83710999b06704840371.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

4回答

你好,

缩放过程中元素的实际像素没有发生改变,你设置多少就是多少。但是随着页面的缩放,只是你肉眼看到变大变小而已。

目前不需要考虑缩放的问题,能够在100%下正常显示页面即可。

好帮手慕星星 2019-11-03 12:06:34

同学你好,可以参考下面的解释:

例如Chrome浏览器缩放至100%以下的时候,你所看到的元素也会变小,但是字体大小为了呈现12px的效果,会相同倍数放大。缩放至75%时,字体大小为16px,缩放至50%,字体大小为24px ,但是你看到的字体效果还是12px 。

Chrome浏览器缩放至100%以上时,元素跟着放大,字体显示也跟着放大,你看到的字体效果大于12px后,设置的10px就生效了,因为效果上已经大于了12px,所以设置小字体也可以。

总结:浏览器最小看到的字体为12px,浏览器缩放会进行相应的调整。

自己再理解下,祝学习愉快!

  • 提问者 慕桂英6225613 #1
    有点晕晕的,就是会变,浏览器有个最小显示字体? 那浏览器缩放是啥作用,就是显示的变大变小?
    2019-11-03 12:34:39
  • 好帮手慕星星 回复 提问者 慕桂英6225613 #2
    是可以这样理解的哦。Chrome浏览器为了用户体验,所以有设置显示最小字体,即使页面缩小到最小,字体也可以被看见。其他浏览器,例如火狐没有设置最小字体,所以设置字体为多少都是可以的。
    2019-11-03 13:41:58
  • 提问者 慕桂英6225613 回复 好帮手慕星星 #3
    好吧,像素这个概念好像不是很懂啊,缩放过程中,像素也产生变化了吗?老师
    2019-11-03 15:10:19
提问者 慕桂英6225613 2019-11-03 11:21:46

这个是67%缩放比例

http://img1.sycdn.imooc.com//climg/5dbe475509c6fb0712820734.jpg

这个是125%缩放比例

http://img1.sycdn.imooc.com//climg/5dbe47c70922ca2112720732.jpg

好帮手慕星星 2019-11-03 10:28:23

同学你好,

1、submit和其他input元素一样,添加value属性就可以,如下:

http://img1.sycdn.imooc.com//climg/5dbe39e4092dbd9f05080052.jpg

效果:

http://img1.sycdn.imooc.com//climg/5dbe39eb09e1c99101640044.jpg

自己再设置其他样式就可以。

2、是使用哪个浏览器进行测试的呢?大部分浏览器都是有字体大小限制的哦,例如Chrome浏览器最小为12px:

http://img1.sycdn.imooc.com//climg/5dbe3a8a09e36d7d03540282.jpg

http://img1.sycdn.imooc.com//climg/5dbe3a980932117d05140257.jpg

10px设置上了,但是显示的为12px哦。

看同学的截图,字体10px好像也设置上了,但是显示为16px:

http://img1.sycdn.imooc.com//climg/5dbe3ae809ba548603430109.jpg

建议同学重新测试下。

如果还是有问题,可以将html和css代码粘贴上来,不要截图,老师帮助你测试,便于准确定位问题所在。

祝学习愉快!

  • 提问者 慕桂英6225613 #1
    老师我在底下又回了一条,您帮忙看一下现象,就是好像字体大小会随着chrome浏览器的缩放改变大小,这是啥原理
    2019-11-03 11:22:59
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师