首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

HTML 文件在PC&移动完美自适应布局的技巧

只不过它只能在pc上完美展现,在手机上最大的字号只有不到4像素,图片也变成了马赛克,会是一种怎样的虐心体验。 最近做了一个群发邮件的手机适配需求就是要解决这个体验问题,先上效果。...优化前: 优化后: 当然,pc和网页版也要完美适配,outlook、foxmail和网页版效果如下: 一、实现思路 参考比较常见的响应式布局,在PC使用左图布局,移动右图。...本次最大的一个功能点就是封面图手机铺满,pc定宽,QQ邮箱又只能支持行内样式,所以封面图就在style里定义了宽度100%,然后针对其他设备和客户写各种hack让它定宽。... 结果outlook2016出来打脸,在pc上铺满屏了。...这次只是使用900px作为手机和pc的分界点。foxmail有个特性就是边栏的宽度不算在media query内,所以当左边栏拉的比较宽的时候,内容会安装手机样式渲染。

3.6K60

PC无需跳转直接调用哔哩哔哩自适应视频

> 可以看到,我们去除了源代码中的bvid和cid字段,同时加上了high_quality=1这个字段和width=100%的 CSS 样式,这样一来,我们调用的视频就可以是高清而且全宽显示了,但是要自适应...因为在 CSS 中无法实现等比高度,所以,我们可以借助 js 代码内容,我们可以给这个 iframe 标签加一个 id,然后再写一段对应的 js 代码,比如我们设定一个mcvideo的 id,则代码变为...调用效果如下:https://www.bilibili.com/video/av674642436 到这里,我们网站调用的 B 站视频,就可以做到高清而且自适应了,大家可以不必担心手机查看时因为设置了固定高度而不能正常显示了...aid=84267566&page=1 &as_wide=1&high_quality=1&danmaku=0# key 说明 aid 视频ID就是B站的 avxxxx 后面的数字 cid 应该是客户id

1K21

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券