精华内容
下载资源
问答
  • css响应式布局
    2022-01-18 16:19:11

    PC端************

    按屏幕宽度大小排序

    分辨率 比例 | 设备尺寸

    1024*500 (8.9寸)

    1024*768 (比例4:3 | 10.4寸、12.1寸、14.1寸、15寸; )

    1280*800(16:10 |15.4寸)

    1280*1024(比例:5:4 | 14.1寸、15.0寸)

    1280*854(比例:15:10 | 15.2)

    1366*768 (比例:16:9 | 不常见)

    1440*900 (16:10 17寸 仅苹果用)

    1440*1050(比例:5:4 | 14.1寸、15.0寸)

    1600*1024(14:9 不常见)

    1600*1200 (4:3 | 15、16.1)

    1680*1050(16:10 | 15.4寸、20.0寸)

    1920*1200 (23寸)

    常用分辨率

    1024 1280 1366 1440 1680 1920

    @media screen and (min-width: 1024px) and (max-width:1100px){
    	
    } /*>=1024 and <1100的设备*/
    
    @media screen and (min-width: 1100px) {
        
    } /*>=1100的设备*/
    
    @media screen and (min-width: 1280px) {
        
    } /*>=1280的设备*/
    
    @media screen and (min-width: 1366px) {
        
    }  
    
    @media screen and (min-width: 1440px) {
        
    } 
    
    @media screen and (min-width: 1680px) {
        
    } 
    @media screen and (min-width: 1920px) {
        
    } 
    

    移动端分辨率

    @media screen and (max-width: 768px){
    	
    }
    

    rem.js(h5和pc)

    var wWidth = window.screen.width;// 当前窗口的宽
    if (wWidth <= 768) {//移动端
      (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              var len = 100* (clientWidth / 750);
              docEl.style.fontSize = len + 'px';
            };
        recalc();
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
    
      })(document, window);
    } else {//pc端
      $(window).resize(function ()// 绑定到窗口的这个事件中
      {
        pcRem()
      });
      pcRem();
      function pcRem () {
        var whdef = 100/1920;// 表示1920的设计图,使用100px的默认值
        var wH = window.screen.height;// 当前窗口的高度
        var wW = window.screen.width;// 当前窗口的宽度
        if(wW>768&&wW<=1920){
          var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
          $('html').css('font-size', rem + "px");
        }else {
          $('html').css('font-size', 100 + "px");
        }
      }
    
    }
    
    更多相关内容
  • 主要介绍了自适应屏幕的CSS响应式布局设计技巧总结,响应式设计是现在移动端页面开发的热门话题,需要的朋友可以参考下
  • 用html css 编写的一个网页的响应式布局 根据窗口大小进行规格变化
  • css响应式布局

    千次阅读 2020-07-21 21:52:01
    响应式布局一、问题发现二、响应式1.标签2.设置视口3.响应式网页开发方法4.媒体查询5.单位值三、最佳选择 一、问题发现 在pc端 在移动端 同一个布局,在pc和移动端显示完全不同,我们不能一个网页开发两套,一个在...

    一、问题发现

    在pc端
    在这里插入图片描述

    在移动端
    在这里插入图片描述

    同一个布局,在pc和移动端显示完全不同,我们不能一个网页开发两套,一个在PC端显示一个在移动端显示。浪费时间、成本和效益。所以提出了响应式布局的方案。

    响应式网页设计或称自适应网页设计或称回应式网页设计/对应式网页设计,是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面计算机显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现,减少用户进行缩放,平移和滚动等操作行为。

    真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局,而是要从整体上颠覆当前网页的设计方法,是针对任意设备的网页内容进行完美布局的一种显示机制。

    二、响应式

    1.标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    改代码的意义是视口宽度(width)=设备宽度(device-width)
    将页面大小 根据分辨率不同进行相应的调节 以展示给用户的大小感觉上差不多。
    如果不设置,一般默认为视口width 980px,height 1024px

    *{
        margin: 0;
        padding: 0;
    }
    .wraper{
        width: 50%;
        height: 200px;
        background-color: chartreuse;
    }
    

    在这里插入图片描述
    在这里插入图片描述

    width = device-width : iphone或者ipad 上横竖屏的宽度 = 竖屏时候的宽度 不能自适应的问题
    initial-scale=1.0 : windows phone ie浏览器 上横竖屏的宽度 = 竖屏时候的宽度 不能自适应的问题
    所以一起写可以达到互相兼容的效果。

    2.设置视口

    <meta name="viewport" content="width=device-width,
    minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    
    1. width: 可视区宽度
    2. device-width: 设备宽度
    3. minimum-scale: 最小缩放比
    4. maximum-scale: 最大缩放比
    5. user-scalable: 是否允许用户缩放(手机双击放大等)
      css像素根据设备像素进行计算 1css 像素 == 1 是设备像素 设备的分辨率 dpi值来计算css像素真正展现的大小(这里坐着在前面一章节已经进行了比较详细的解析)

    3.响应式网页开发方法

    1. 流体网格:可伸缩的网格 (大小宽高 都是可伸缩(可用flex或者百分比来控制大小)float)—》 布局上面 元素大小不固定可伸缩
    2. 弹性图片:图片宽高不固定(可设置min-width: 100%)
    3. 媒体查询:让网页在不同的终端上面展示效果相同(用户体验相同=>让用户用着更爽) 在不同的设备(大小不同 分辨率不同)上面均展示合适的页面
    4. 主要断点: 设备宽度的临界点
      在这里插入图片描述
      (临界点)大小的区别 —》 宽度不同 —》 根据不同宽度展示不同的样式
      响应式网页开发主要是在css样式上面进行操作
      其中媒体查询为主要应用方式。

    4.媒体查询

    媒体查询是向不同设备提供不同样式的一种方式,它为每种类型的用户提供了最佳的体验。
    css2: media typemedia type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。
    在这里插入图片描述

    css3: media querymedia query是CSS3对media type的增强,事实上我们可以将media query看成是media type+css属性(媒体特性Media features)判断。
    在这里插入图片描述
    媒体查询三种方式(对应css引入方式)

    1. 外部引入link
    <link rel="stylesheet" media="screen and (max-width: 375px)" href="index.css">
    
    1. 外部引入@import
    @import 'index.css' screen and (max-width: 375px);
    
    1. 内部引入style
      css样式引入媒体查询不占用权重,所以一般放在css最后面(避免被覆盖)
    @media screen and (max-width: 375px){
    	html, body {
            width: 100%;
            height: 100%;
            background-color: red;
        }
    

    逻辑操作符:

    1. 合并多个媒体属性 and
    @media screen and (min-width: 600px) and (max-width:1000px)
    
    @media screen and (min-width: 769px), print and (min-width: 6in)
    

    没有or关键词可用于指定备用的媒体功能,可以将备用功能以逗号分割列表的形式列出
    这会将样式应用到宽度超过769像素的屏幕或使用至少6英寸宽的纸张的打印设备

    1. 指定否定条件
    @media not screen and (max-width:300px)
    

    除了宽度小于300px的才可以显示

    1. 向早期浏览器隐藏媒体查询
      Only指定某种特定的媒体类型 为了兼容不支持媒体查询的浏览器
    @media only screen and (max-width:300px)
    ==
    @media screen and (max-width:300px)
    

    device-width/device-height 是设备的宽度(如电脑手机的宽度 不是浏览器的宽度)
    width/height使用documentElement.clientWidth/Height即viewport的值。渲染宽度/高度/视口宽度

    5.单位值

    1. Rem:rem是CSS3新增的一个相对单位(root em,根em)相对的只是HTML根元素。
    html{
        font-size: 14px;
    }
    .wraper{
        width: 10rem;
        height: 200px;
        background-color: chartreuse;
    }
    

    在这里插入图片描述
    最终等于html跟标签的font-size的10倍

    1. Em:em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(font-size属性是可以继承的)。
    .wraper{
        font-size: 16px;
        width: 10em;
        height: 200px;
        background-color: chartreuse;
    }
    

    在这里插入图片描述

    1. Vw:相对于视口的宽度。视口被均分为100单位的vw
    .wraper{
        font-size: 16px;
        width: 50vw;
        height: 200px;
        background-color: chartreuse;
    }
    

    在这里插入图片描述
    在这里插入图片描述

    1. Vh:相对于视口的高度。视口被均分为100单位的vh
      同上vw
    2. Vmax: 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
    3. Vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

    三、最佳选择

    内容设计胡问题都可以通过响应式设计思路解决, 项目的预算,目标用户以及定位决定了其实现方式。
    项目的预算,人力,物力,财力, 时间成本
    目标用户
    产品定位

    渐进增强 —》 iphone6 向上兼容 兼容最新设备
    优雅降级 —》 开发通用版本 再兼容老版本 向下兼容
    先移动端 —》 pc端
    先iphone6为初始原型 开发 —》 兼容其他的设备 ====》 渐进增强

    展开全文
  • css 响应式布局介绍

    2022-01-08 17:18:50
    响应式布局的概念: 响应式布局的特点: 响应式的操作步骤: 1.设置meta

    响应式布局的概念:

    响应式布局的特点:

     响应式的操作步骤:

     1.设置meta

     

    展开全文
  • html + css响应式布局

    2022-09-18 12:45:02
    供参考
  • 响应式布局可以让网站同时适应不同的分辨率和不同的手机端,让客服端有更好的体验 方案一:百分比布局(流式布局,就是百分比布局,也称为非固定像素布局) 利用对属性设置百分比来布局,这里的百分比布局是相对应父...

    响应式布局可以让网站同时适应不同的分辨率和不同的手机端,让客服端有更好的体验

    方案一:百分比布局(流式布局,就是百分比布局,也称为非固定像素布局)

    利用对属性设置百分比来布局,这里的百分比布局是相对应父元素;能够设置的属性有width、height、margin、padding,其他属性border、font-size(不能使用百分比,只能使用px)不能用百分比设置

    注意:
    1.当屏幕大于图片的宽度时,会进行拉伸,解决拉伸方法就是改为max-width:50%,但当屏幕大于图片的宽度时,两边会有空白。

    2.导航栏是利用设置单栏 width:25%来设置不同的分辨率。

    3.由于没办法对font-size进行百分比设置,所有最多还是使用在整个页面布局和图片上面。

    方案二:使用媒体查询(css3 @media 查询)

    利用媒体查询设置不同分辨率下的css样式,来设配不同屏幕。

    注意:IE6、7、8不支持媒体查询。

    方案三:rem响应式布局

    当前页面中元素的rem单位的样式值都是针对于html元素的font-size的值进行动态计算的,所以有两种方式可以达到适应不同屏幕:

    第一种利用媒体查询,在不同分辨率下给html的fotn-size赋值。

    第二种利用js动态计算赋值

    缺点:打开页面时候,元素大小会有一个变化过程。

    方案四:vw、vh响应式布局

    根据PSD文件宽度或高度作为标准,元素单位px转换成vw或vh,比如font-size:12px,PSD文件宽度375,转换公式12*100/375,则样式为font-size:3.2vw

    rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;

    vw:相对于视口的宽度。视口被均分为100单位的vw;

    vh:相对于视口的高度。视口被均分为100单位的vh;

    vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;

    vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;

    方案五:felx弹性盒子布局
    在这里插入图片描述

    利用flex数据来适应不同屏幕

    flex-direction属性:决定主轴的方向(即项目的排列方向);

    flex-wrap属性:规定如果一条轴线排不下,如何换行;

    flex-flow属性:是flex-direction属性和flex-wrap属性的简写形式,默认值为row/no-wrap;

    justify-content属性:定义了项目在主轴上的对齐方式;

    align-items属性:定义项目在交叉轴上如何对齐;

    align-content属性:定义了多根轴线的对齐方式;

    展开全文
  • 现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式。 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同屏幕大小、不同分辨率、不同...
  • css实现响应式布局

    2022-04-17 09:41:51
    什么是响应式布局 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别:响应式开发一套...
  • 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面,手机端再开发一套...
  • CSS响应式布局

    千次阅读 2017-04-23 17:24:47
    响应式网页仅使用HTML+CSS进行设计,其内容会随着设备尺寸自动的resize以适应设备显示能力。通常它能够在各种类型的媒介上均呈现出很好的布局效果,可以为绝大多数或所有的用户带来最好的用户体验。 viewport是指...
  • HTML5食谱卡片滑动切换特效是一款可用于购物商城商品列表布局,或企业产品图文展示。
  • CSS实现响应式布局

    千次阅读 2021-08-04 08:19:01
    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用使用@media 的三种方式第一: 直接在CSS文件中使用@media 类型 and (条件1) and ...
  • CSS响应式布局

    千次阅读 2022-03-29 11:53:48
    四、响应式布局 4.1 rem单位 设置***文字大小***的单位 px:设置为固定的css像素 em:相对于父元素字体的大小 %:相对于父元素字体的大小 rem:相对于根元素(html)的字体大小 设置***宽度***的单位 ...
  • html css 响应式布局

    千次阅读 2015-06-17 13:34:11
    讲到响应式布局,相信...今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3 Media Query实现响应布局)。 一、什么是响应式布局?
  • 响应式布局参考css文件
  • CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使用: @media 类型 and ...
  • CSS--响应式布局的实现方式

    多人点赞 2021-12-23 00:08:19
    说明 本文介绍前端响应式布局的实现方式。 响应式布局简介 响应式布局:只需要一套代码就可以了,它可以适用于所有设备(PC、手机、平板等)。同一页面在不同屏幕尺寸下有不同的布局。
  • 响应式布局–(解决 F12右侧打开控制台,往左挤压,出现的问题) 问题一:模型删除按钮下移 解决方法: 1.上图大框整体设置一个.flex(默认横向排列),整体分为两部分(两个div) 挤压时,最外部的div未加flex: ...
  • html5 css3响应式布局介绍及设计流程 实现响应式布局的3种手段.zip
  • CSS响应式布局的四种方式

    千次阅读 2020-12-19 16:34:40
    简单介绍四种响应式布局的四种方式 总的html代码 <body> <div class="box"> <div class="left">left</div> <div class="center">中间</div> <div class="right">...
  • CSS3响应式布局(@media)

    千次阅读 2020-07-13 16:15:20
    一、@media 响应式布局(媒体查询) 什么是响应式布局:一套代码实现多种设备访问一致性(pc、平板、手机) 优点: 一直保持一个url,一套代码 缺点: 浏览器支持程度 (ie8和以下就不兼容了) 二、@media 使用 语法...
  • } } 如果设计比较复杂的布局,可能必须写两套代码,比如导航菜单,pc的导航是不能在移动端使用的,所以我们可以通过给予通用类,控制是否显示。 是否显示: //pc和移动 .pc{ display: block; } .yd{ display: none;...
  • 下面小编就为大家带来一篇css3 media 响应式布局的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 网页设计资料
  • CSS3响应式布局

    2018-03-08 17:24:55
    介绍了css响应式布局的方法展示和代码,欢迎下载观看

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 55,533
精华内容 22,213
关键字:

css响应式布局