专栏首页小维博客HTML前端 PC端/手机端,怎么在不同的分辨率完美展示图片?

HTML前端 PC端/手机端,怎么在不同的分辨率完美展示图片?

怎么在不同的分辨率完美展示图片

废话不多说,直接上代码,CSS样式套用,根据自己需求修改即可食用。

<style media="screen">
    /*分辨率低于1280,采用下面的样式*/
    @media screen and (max-device-width:1280px){
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    }

    /*分辨率高于1440,采用下面的样式*/
    @media screen and (min-device-width: 1440px){
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    }
</style>

版权声明:本站原创文章 HTML前端 PC端/手机端,怎么在不同的分辨率完美展示图片? 由 小维 发表! 转载请注明:HTML前端 PC端/手机端,怎么在不同的分辨率完美展示图片? - 小维的个人博客 部分素材来源于网络,如有侵权请联系删除!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样...

    何处锦绣不灰堆
  • Emoji絵文字/えもじ -- 多终端适配!

    腾讯ISUX
  • 下手响应式及断点设置分析

    本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 首先,本文是普通入门知识篇,主要说的是断点的设置。 很多想接触响应式的同学都...

    IMWeb前端团队
  • 下手响应式及断点设置分析

    这个问题呢就跟女神有多面一样,比喻在家是睡衣,上班是职业装,团建参加活动什么的就是休闲运动装了。网页呢,对于pc,平板,手机当然也得有不同的打扮排版才吸引用户,...

    IMWeb前端团队
  • 移动端适配大法

    前端代码的编写永远逃不过“兼容”二词,从前PC时代,因为IE的傲娇,导致程序猿们一直在兼容IE的道路上挣扎,如今移动设备的普及,仿佛让我们看到了希望,仿佛马上就...

    IMWeb前端团队
  • 响应式布局与自适应式布局有什么不同

    很多人会对响应式布局和自适应式布局产生混淆,这两者到底有着什么样的区别呢?因为不同于移动站,就事一个独立的站点,每个模块都有独立接口,但是Google一直以来就...

    李洋个人博客
  • 可爱的rem

    嗯,这种的样式的工作量超级大,因为要对图片和文字等资源针对不同的尺寸进行设置。一种凉凉的感觉从心底飘过~~~

    嘉明
  • 携程2015 Open House获奖项目:响应式的蜕变

    响应式的蜕变 Ctrip Tech 本文不再从最基本的语法开始行文,而在列举一些最基本的信息之后,开始探讨传统响应式设计的问题,与在实践当中思考出来的改进方法,...

    携程技术
  • 浅谈Web自适应

    前言 ? 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率...

    企鹅号小编
  • 浅谈web自适应

    随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这...

    疯狂的技术宅
  • 移动 web 开发最佳实践

    本文从细节和原理入手,一步一步探讨构建移动web界面的最佳实践。对移动端H5高清和多屏适配的一些方案总结,没有固定的套路及方法,请根据自身业务的特点,选择其中的...

    刘春鹏
  • 移动端web开发入门笔记

    简单来说就是在开发中使用一些浏览器私有的方法,使得web页面拥有一些native的功能。

    IMWeb前端团队
  • 移动端web开发入门笔记

    移动端web开发基本上分为三种: 移动端网页开发 传统的页面开发,可以参考手机腾讯网。 移动端web app开发 简单来说就是在开发中使用一些浏览器私有的方法...

    IMWeb前端团队
  • 微信团队分享:视频图像的超分辨率技术原理和应用场景

    图像和视频通常包含着大量的视觉信息,且视觉信息本身具有直观高效的描述能力,所以随着信息技术的高速发展,图像和视频的应用逐渐遍布人类社会的各个领域。近些年来,在计...

    JackJiang
  • HTML5干货』响应式布局的设计方法和响应式前端优化

    作为一名优秀的web前端人员,不懂响应式布局怎么可以呢? 今天跟大家分享web前端开发和设计的干货。关于响应式布局的设计方法和响应式前端优化。 我们都知道,目...

    前朝楚水
  • CSS尺寸单位介绍

    前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍

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

    ? 本文作者:李晓玮,腾讯 IEG 高级工程师 都2019年了,手机查看HTML邮件的体验怎么还那么差? 试想一下,你在夜深人静的时候,准备睡前查看一下订阅的...

    腾讯技术工程官方号
  • 谈设计与技术,以WEB布局为例

    本文基于“跨界”思维,以 WEB 布局为例,从3个方面,谈谈设计与技术的关系: 1 自适应布局与响应式布局 2 CSS 的布局特性演进 3 设计语言与 W...

    mixlab
  • CSS尺寸单位介绍

    前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍

    陌上寒

扫码关注云+社区

领取腾讯云代金券