自适应 | 易学教程

html5纯css字体大小自适应设置

阅读更多关于 html5纯css字体大小自适应设置

css 字体大小自适应样式设置篇字体可以设置大小使用 css font-size 来实现，有时需要对字体大小根据浏览器分辨率来判断后自适应大小。在 CSS 2.0中字体大小自适应是难实现的，一般使用JS来实现，这里就不必说了。现在字体大小自适应样式常常使用在IE10、谷歌浏览器、较新手机、平板平台上（安卓、ios），可以使用CSS3.0来实现。但是依然是使用font-size字体大小样式来设置，只不过值在CSS3版本中新增了自适应百分比大小值。 css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。 “viewpoint” = window size 15vw = 15% 设置width（可以理解为宽度单位） 15vh = 15% 设置height（可以理解高度单位）此CSS 3单位兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+ 具体示例代码如下： <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>文字大小自适应实例</title> <style> #fontset{font-size:5vw;} </style> </head> <body> <div id="fontset"> 文本字体大小为5vw </div> <

iOS UIImageView自适应图片大小

阅读更多关于 iOS UIImageView自适应图片大小

窗口大小获取： CGRect screenBounds = [ [UIScreenmainScreen]bounds];//返回的是带有状态栏的Rect CGRect rect = [ [UIScreenmainScreen]applicationFrame];//不包含状态栏的Rect UIImageView：一：圆角以及自适应图片大小 UIImage* image = [UIImage imageNamed:@"image.png"]; UIImageView* imageView = [[[UIImageView alloc] initWithImage:image] autorelease]; imageView.frame = CGRectMake(0, 0, 300, 200); imageView.layer.cornerRadius = 8; imageView.layer.masksToBounds = YES; //自适应图片宽高比例 imageView1.contentMode = UIViewContentModeScaleAspectFit; 二图片自适应UIImageView (来源于:http://www.61ic.com/Mobile/iPhone/201103/29636.html) - (UIImage *

UIImageView自适应图片大小

阅读更多关于 UIImageView自适应图片大小

转自：http://www.cnblogs.com/zhidao-chen/archive/2013/05/20/3088164.html 窗口大小获取： CGRect screenBounds = [ [ UIScreenmainScreen ] bounds ]; // 返回的是带有状态栏的 Rect CGRect rect = [ [UIScreenmainScreen]applicationFrame];//不包含状态栏的Rect UIImageView：一：圆角以及自适应图片大小 UIImage* image = [UIImage imageNamed:@"image.png"]; UIImageView* imageView = [[[UIImageView alloc] initWithImage:image] autorelease]; imageView .frame = CGRectMake(0, 0, 300, 200); imageView.layer.cornerRadius = 8; imageView.layer.masksToBounds = YES; //自适应图片宽高比例 imageView1.contentMode = UIViewContentModeScaleAspectFit; 二图片自适应UIImageView (来源于:http

pc端布局的一点思考

阅读更多关于 pc端布局的一点思考

编写pc端页面需要注意些什么？ 1、自适应最小屏幕，在小屏幕上样式不能错乱。在桌面屏幕各分辨率使用比例中可以看到各桌面分辨率的使用比例，日常pc端开发我们会考虑到适配1024宽度大小的屏幕。对于管理系统，设置内容宽度最小为1024，这样当屏幕小于1024时，保证样式不会乱。 2、自适应更大的屏幕。如果需要适应刚好一屏的页面，用百分比来设置元素宽度，而不是写死设计师给的宽度。 3、设计师都是参照某个尺寸来设计的设计稿。比如我们的设计师在设计pc端的管理系统的页面是参考的1440px的屏幕宽度，所以我们需要在还原了1440px屏幕宽度的设计稿之后，要考虑到小于1440px的屏幕适应问题。 4、考虑内容高度是需要适应一屏的高度，还是固定，还是由内容撑大。 5、自适应和响应式的区别自适应适应不同屏幕大小，样式、排版不会变。响应式适应不同屏幕大小，样式、排版会有所改变。 6、设计自适应网站时，一般采用内容定一定宽度来适应不同屏幕转载于:https://www.cnblogs.com/yy95/p/10402741.html 来源： CSDN 作者： weixin_34308389 链接： https://blog.csdn.net/weixin_34308389/article/details/93833630

前端布局layout总结，左右布局，上中下布局

阅读更多关于前端布局layout总结，左右布局，上中下布局

老生长谈：css实现右侧固定宽度，左侧宽度自适应 2013.01.21 BY 十年灯 · 13条评论反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？要实现这种布局，也算比较简单。我们先给出html结构： 1 2 3 4 5 < div id = "wrap" > < div id = "sidebar" style = "height:240px;" > 固定宽度区 < / div > < div id = "content" style = "height:340px;" > 自适应区 < / div > < / div > < div id = "footer" > 后面的一个DIV，以确保前面的定位不会导致后面的变形 < / div > 代码中的#wrap的div，是用来包裹我们要定位的这两个区的；他后面还有个#footer，用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了，那证明我们的定位方法必须改进。下面列举几个常见的方法： 1，固定宽度区浮动，自适应区不设宽度而设置 margin 我们拿右边定宽左边自适应来做示范,CSS代码如下： 1 2 3 4

PC端CSS布局汇总

阅读更多关于 PC端CSS布局汇总

前言此文章是解剖CSS布局原理的续集，之前那篇文章讲的都是理论，本文章讲具体的实例，根据自己对布局的理解与开发经验分为以下几类。因为PC端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对PC端的布局进行讲解，以下代码只写关键代码。如果你发现你写了关键打代码还达不到效果，请检查是否写了不该写的样式。为了提高网页性能，考虑到repaint/reflow，表格元素尽量少用，有其他选择的情况尽量用其他布局。居中布局一、单个元素水平居中 <div id="container"> <div class="box"></div> </div> 1. 宽度固定方法一： .box { width: 300px; margin: 0 auto; } 比较常用的方法方法二： #container { position: relative; } .box { width: 100px; position: absolute; left: 0; right: 0; margin: 0 auto; } 此方法适用于定位时的居中方式 2. 宽度不固定方法一： .box { display: table; margin: 0 auto; } 缺点：设置为表格元素，内部元素的布局有可能收到影响方法二： #container { position: relative; } .box {

PC端自适应（vue）

阅读更多关于 PC端自适应（vue）

npm i lib-flexible -S npm i px2rem-loader -D 安装完成以后在main.js引入 import 'lib-flexible' 在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 1920px。 //utils.js const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 192 } } 下面loader函数 function generateLoaders (loader, loaderOptions) { const loaders =

pc端和移动端自适应网页

阅读更多关于 pc端和移动端自适应网页

做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768（传统17寸显示器），则可以采用940px、960px、或者常用的980px作为最小宽度 2、1024*768之后稍大的分辨率就是1280*768了，则可以采用1200px或者1220px作为稍大的网页宽度 3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签 4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了 5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。 6、宽度自适应为不同宽度显示器写布局元素时常用的css 一：了解高度和宽度的基础网页可见区域高宽为：document.body.clientHeight||document.body.clientWidth 网页正文的区域高宽为：document.body.scrollHeight||document.body.scrollWidth

PC端自适应布局

阅读更多关于 PC端自适应布局

截止目前，国内绝大多数内容为主的网站（知乎，果壳，V2EX，网易新闻等）均使用内容区定宽布局，大多数电商网站（网易考拉，京东，聚美优品）也使用了内容区定宽的布局，也有些网站使用了自适应布局：该篇文章为转载，更多文章见我的个人博客： http://cherryblog.site/ 天猫内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的，但是也可以完美的适应不同的屏幕；淘宝内容区也是采用了媒体查询+定宽；达到某个节点之后隐藏某些元素：宽屏：窄屏: 微博页面主体定宽，当小于1007的时候，把侧边栏隐藏，内容区本身是定宽。亚马逊很多宽度和高度是js动态计算赋值。总结(什么时候做响应式，怎么做响应式) 目前看来，内容为主的社区网站或者电商网站使用自适应布局的并不多，仅有的几个也没有做大范围的自适应布局，一般是使用媒体查询在几个断点（不超过三个，微博这样的只设置了一个断点）做响应式进行布局微调。内容为主（大量文字，少量图片）的网站不适合做响应式布局，大量图片少量文字的网站比较适合做响应式布局（比如花瓣，airbnb）。是否做响应式和用户体验没有必然关系。如果要做PC端自适应布局，尽量控制变化的范围

图片自适应屏幕大小

阅读更多关于图片自适应屏幕大小

有时候美工给过来的图片不规范，用户手机屏幕大小不一样。可能导致在不同的用户手机上显示效果不一样，这时候需要对图片的显示做自适应。一把来说自适应可以根据需求，做成宽高固定显示屏幕大小。但对于一些长图可能出现图片被压缩在一个屏幕内导致长度变短。如果做成宽度100%。长度自适应的话，当图片长度不够时可能出现留白。需要自己做出取舍。下面只做宽度固定，长度自适应。可以放长图。话不多说直接上代码：只需要在div里嵌套一个img，这样能保证长图时屏幕可以滑动。看下css的写法 width和height都为100%则图片显示的部分是铺满屏幕的。 top,left=0则从屏幕左上角开始 background-size的宽度设成100%保证图片铺满外面的div,长度auto则当长图时图片可以在div里下滑。亲测有效。只需把img的src换成需要显示的图片的url即可。来源： CSDN 作者： leaves_story 链接： https://blog.csdn.net/leaves_story/article/details/89330894

订阅自适应