不同移动设备的响应式布局demo

最新推荐文章于 2022-01-11 13:04:50 发布
最新推荐文章于 2022-01-11 13:04:50 发布
阅读量266 收藏 3
点赞数
分类专栏： CSS HTML 文章标签： rem vw 响应式 scale
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32447287/article/details/83623582
版权
CSS 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
HTML
5 篇文章 0 订阅
订阅专栏

概述：
可以实现根据不同分辨率的设备，来动态改变图片大小，字体大小，输入框大小，盒子间距…

关键技术点：

  1. 相对长度单位rem，vw
  2. window.devicePixelRatio
  3. meta name=“viewport” content=“width=device-width, initial-scale=0.5”
<DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=0.5">
       <title>移动设备屏幕分辨率适配</title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }

           span{
               display: inline-block;
               font-size: 0.32rem;
               margin-top: 2vw;

           }
           
           .search_input{
               width: 100%;
               padding: 2.5vw;
               border: 3vw solid red;
               font-size: 0.37rem;
               text-align: center;
               color: #999;
           }
           
           .list{
               display: flex;
               flex-wrap: wrap;
               justify-content: space-evenly;
           }
           .item{
               width: 44vw;
               height: 44vw;
               background: #ccc;
               margin-top: 3vw;
               list-style: none;
           }
           .box{
               text-align: center;
           }
       </style>
   </head>
   <body>
       <div class='search'>
           <input type="text" placeholder="请输入商品名" class="search_input">
       </div>
       <div class="product_list">
           <ul class="list">
               <div class="box">
                   <li class="item"></li>
                   <span>商品1</span>
               </div>
               <div class="box">
                   <li class="item"></li>
                   <span>商品2</span>
               </div>
               <div class="box">
                   <li class="item"></li>
                   <span>商品3</span>
               </div>
               <div class="box">
                   <li class="item"></li>
                   <span>商品4</span>
               </div>
               <div class="box">
                   <li class="item"></li>
                   <span>商品5</span>
               </div>
               <div class="box">
                   <li class="item"></li>
                   <span>商品6</span>
               </div>
               <div class="box">
                   <li class="item"></li>
                   <span>商品7</span>
               </div>
               <div class="box">
                   <li class="item"></li>
                   <span>商品8</span>
               </div>
           </ul>
       </div>
       
       <script>
           window.onload = function() {
              setRootFontSize();
              setScaleFactor();
           }

           window.addEventListener('resize', function () {
               setRootFontSize();
               setScaleFactor();
           })

           function getDeviceWidth() {
               return window.innerWidth;
           }

           function getDpr() {
               return window.devicePixelRatio;
           }

           function setRootFontSize() {
               var deviceWidth = getDeviceWidth();
               document.documentElement.style.fontSize = deviceWidth / 10 + 'px';
           }

           function setScaleFactor() {
               var dpr = getDpr();
               document.getElementsByTagName('meta')[1].setAttribute('content', `width=device-width, initial-scale=${1 / dpr}`)
           }
       </script>
   </body>
</html>

在这里插入图片描述

努力努力再努力！！！
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一款响应式的网站Demo
Chenkaixin0512的博客
09-02 2146
本作品原始灵感来源慕课网实战视频，如果大家有需要可以star我的GitHub，里面还有许多实战的源码，之后也会不断更新。 接下来记录一些编程当中的重难点 viewport视口对于PC端： 视口就是浏览器主窗口的区域 对于手机端： layout port布局视口：一个虚拟的视口，一般是960px来把页面先进行渲染 visual port可视视口：一个网页在手机上呈现出来的区域的宽度，用户
基于WebFlux的响应式Spring初探demo
A_D_wocaoni的专栏
09-09 309
1、响应式编程式什么？为什么现在都认为这个是微服务的趋势？ 先挖个坑吧，给个简单的公式。 响应式编程=数据流+变化传递+声明式 2、下面废话不多说直接上代码 WebFlux的核心Reactor的实现思路和介绍可跳转 https://docs.spring.io/spring/docs/current/spring-framework-reference/web-reactive.h...
demo-响应式
01-24
demo-响应式demo-响应式demo-响应式demo-响应式demo-响应式
响应式网站demo
10-22
用的响应式布局，初学者可以看看
media 响应式布局不同设备适配
12-11 112
在网页中，pixel与point比值称为device-pixel-ratio，普通设备都是1，iPhone 4是2，有些Android机型是1.5，在页面中通过window.devicePixelRatio可以获取到。 iPhone4/4s的分辨率为640*960 pixels，DPI为是320*480，设备高度为480px，-webkit-min-device-pixel-rati...
响应式的网页demo(原创)
01-24
响应式的网页demo(原创)响应式的网页demo(原创)响应式的网页demo(原创)
响应式布局
10-25
在“响应式布局demo”这个压缩包中，可能包含了一个或多个示例页面，展示了响应式布局在不同设备上的表现。这些示例通常包括HTML文件、CSS文件和可能的JavaScript文件，开发者可以通过查看和修改这些文件，学习如何...
响应式设计demo
01-22
响应式设计是一种现代网页开发的方法，它允许网页在不同设备上自动调整布局、内容和功能，以适应不同的屏幕尺寸和分辨率。这种设计理念的核心是“流动”（Flexible Grid）、“弹性图片”（Flexible Images）和“媒体...
Html5响应式时光轴Demo
09-13
HTML5响应式时光轴是一种利用HTML5、CSS3和JavaScript技术构建的网页设计元素，它允许...通过巧妙地组合和运用这些技术，我们可以创建出既美观又实用的时光轴Demo，无论是在桌面还是移动设备上都能提供优秀的用户体验。
响应式布局最最最简单的demo
weixin_38436883的博客
08-27 265
首先要在head标签内引入这两句 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" /> <meta content="telephone=no,email=no" name="format-detection" /&g...
响应式多平台前端demo
05-28
响应式，多平台访问，前端，html5+css3，个人源码 响应式，多平台访问，前端，html5+css3，个人源码
响应式布局（Responsive layout，RL）的简单Demo
10-06 219
★背景： 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计...
响应式布局demo遗留问题
hope-dwj的博客
06-22 205
1.float？2.去除float效果？为什么有display：table？浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像：要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。浮动的宗旨是，在不溢出包含块的情况下，尽量的靠上靠左/右放置...
响应式设计笔记整理加+自己Demo中解决的问题
weixin_52761831的博客
01-11 405
响应式技术的来源，视 四种布局类型：固定布局、流动布局、弹性布局、混合布局 布局类型 一、固定布局 固定布局中，页面宽度会被指定为特定大小的像素，其中960px是使用最为广泛的宽度。（960对网格布局提供多种可能）然而固定布局却有一个弊端，那就是他对页面的大小是固定的，当访客使用屏幕较小的设备浏览站点时，会出现丑陋的滚动条。当大屏幕的设备浏览站点时会在页面两边看到大片的、未使用的空白区域。对于固定布局而言，用户的体验性不佳，为了解决这个问题，流动布局便孕育而生。 二、流动布局 在流动布局中，度量
移动端vw布局详解
热门推荐
zjw0742的博客
02-19 16万+
有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为了新...
深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
weixin_33757609的博客
07-27 239
1、px：绝对单位，页面按精确像素展示 2、em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的...
css3中的width:100vh以及calc(100vh + 10px)
qq_24581629的博客
05-17 4万+
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小， 即window.innerWid
css3新单位vw、vh、vmin、vmax的使用详解（附样例）
JoeBlackZQQ的专栏
08-23 2273
From: http://www.hangge.com/blog/cache/detail_1715.html 像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。   一、基本说明 1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位...
移动端设计方案--如何设计移动端屏适配方案
saucxs
05-20 835
一、前言 在众多的移动设备中，前端开发人员如何在不同屏幕大小，不同程度的高清屏下去百分百的还原设计稿，从来都不是一件简单的事情，需要考虑众多因素，权衡利弊，做出取舍，结合需求去选择最合适的方案。 之前有一篇：如何设计移动端高清方案 二、面对的问题 在不同大小和高清的屏幕下： （1）如何保证 页面布局的一致性：不错乱，不变形； （2）如何保证 字体大小的一致性：大屏显示更大，小屏显...
h5响应式网站 demo
最新发布
12-30
在这个h5响应式网站的demo中，我们可以看到在不同设备下网页布局和样式的自适应特性。无论是在电脑上浏览，还是在平板电脑或手机上访问，网站都能够根据屏幕大小和触控方式进行自动调整，确保用户能够获得最佳的浏览...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值