图文响应式样式

图片描述

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

bootstrap css3

阅读 4.3k

6 个回答

得票最新

贝加尔湖

22623347

发布于
2017-05-15

✓ 已被采纳

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

emmy_

可以参考淘宝的
flexible

使用rem,或者flex布局

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

随便写了一个简单的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) { ... }

孤月

2.9k1314

发布于
2017-05-19

请使用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; } //这样来就行了，所需代码很少，而且是响应式的
}