【CSS】图文响应式样式

图片描述

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

回答：

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

回答：

可以参考淘宝的
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) { ... }

回答：

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

回答：

要是解决字体模糊等问题，可以通过媒体查询根据不同的分辨率引入不同的图片

以上是 【CSS】图文响应式样式 的全部内容， 来源链接： utcz.com/a/154163.html

回到顶部