当前位置：文江博客话题详情

图文响应式样式

发布于 2022-09-05 00:53:14 字数 252 浏览 22 评论 0

图片描述

把这个页面做成PC桌面端响应式效果：一种方法是直接把图片做成响应式，这种做法简单，唯一的不好就是文字模糊，效果感觉不太完美；另一种方式是图片+文字，这种做法文字大小需要自适应，文字位置关系更不容易做好。请问有什么好的做法吗？求提供！

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

昇り龍 2022-09-12 00:53:14

楼上两位同学：淘宝的flexible,还有rem,其实都是一个东西，当时淘宝是来解决H5移动端适配问题，非响应式问题。

回复收藏 0

兲鉂ぱ嘚淚 2022-09-12 00:53:14

可以参考淘宝的
flexible

回复收藏 0

妄司 2022-09-12 00:53:14

使用rem,或者flex布局

回复收藏 0

寄离 2022-09-12 00:53:14

还有一个东西叫做媒体查询，图片以背景图出现然后文字居中就好了啊

随便写了一个简单的demo

这里没法写手机端我大概说下思路吧
在<head>之中添加 meta

<meta name="viewport" content="width=device-width, initial-scale=1">
然后媒体查询判断字体大小即可
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

回复收藏 0

扛刀软妹 2022-09-12 00:53:14

请使用rem来布局，相对于flex布局来说，在iphone4上的显示效果更友好，在iphone4上好像要用box布局。
一般我写h5的方法是：

html{
    font-size:120px; //定义rem单位的相对基准 1rem = 120px;
}

.content{
    font-size:0.1rem; //12px
    width : 5rem; //600px; 通过这样来弄，至于适配的话
}

@media screen and (max-width:800px){
    html{ font-size:100px; } //这样来就行了，所需代码很少，而且是响应式的
}

回复收藏 0