responsive-design

问题 I want to switch between a desktop and mobile template depending on the screen width to ensure my application is responsive. I am trying to do the following: @Component({ selector: 'app-root', templateUrl: "./" + (window.innerWidth < 768) ? "app.component.html" : "app.component.mobile.html", styleUrls: ['./app.component.css'] }) However, this is not working. Instead of the template loading, the string, "app.component.html" , appears on the screen instead. What is even more interesting is that

问题 I'm a real beginner at html and css so it will be great if you guys can give me some insight! I'm currently working on my personal website. What I want to accomplish is something like this... http://gyazo.com/741e08b227cb1e65f985bdd6b707815c (Photoshop) A colored background with 100% height and width, with centered elements (app icon, app name, app description) This is what I currently have... HTML <section id="app"> <div> <h2>app</h2> <p>This is a sample description <br> for an iOS

问题 I'm designing a basic, two-column fluid responsive layout that linearizes for mobile-- as depicted in my attached diagram -- using floated elements; and I'm having an issue with certain elements dropping, as can be viewed in the fiddle I've set up here. For some reason, "block 7" aligns with the top of "block 6" instead of flowing below "block 3" as desired. I have two questions with respect to this layout: (1) how can I get the blocks to align as intended; and (2) is it possible, say using

问题 I have been working on a fully responsive design which was going along great and tested properly on all the devices I could get my hands on... Until I viewed the project in the mobile version of Chrome on a Samsung Galaxy S4... It appears that the default media report is 1920x1080 which causes my layout to load the same way as if on my widescreen desktop. Granted, everything is still usable, but it is TINY. To solve this you need only make sure to use the viewport tag in the head of your

问题 I have been working on a fully responsive design which was going along great and tested properly on all the devices I could get my hands on... Until I viewed the project in the mobile version of Chrome on a Samsung Galaxy S4... It appears that the default media report is 1920x1080 which causes my layout to load the same way as if on my widescreen desktop. Granted, everything is still usable, but it is TINY. To solve this you need only make sure to use the viewport tag in the head of your

问题 I have been working on a fully responsive design which was going along great and tested properly on all the devices I could get my hands on... Until I viewed the project in the mobile version of Chrome on a Samsung Galaxy S4... It appears that the default media report is 1920x1080 which causes my layout to load the same way as if on my widescreen desktop. Granted, everything is still usable, but it is TINY. To solve this you need only make sure to use the viewport tag in the head of your

问题 I have 3 columns in the following order: <div class="container-fluid"> <h1>Hello World!</h1> <p>Resize the browser window to see the effect.</p> <div class="row"> <div class="col-sm-3">left column</div> <div class="col-sm-6">center column</div> <div class="col-sm-3">right column</div> </div> </div> And I want to re-order with push and pull. I need the center column on the top, and the others column with a size of 6. 回答1: I found a great answer that it may be useful to you Column order

问题 There exists a square div that is an arbitrary percent wide (and the same amount high) that needs to scale with the window. It must stay within the bounds of the viewport (ie: not clipping outside) and maintain its square shape - essentially duplicating the background-size: contain; feature of CSS. I need to support iOS Safari v3.2, so I can't use vw/vh/vmin/vmax and would strongly prefer a CSS-only solution. 回答1: You can set it using :after in CSS DEMO http://jsfiddle.net/kevinPHPkevin/5tzk3

问题 I'm trying to make a container that has an upward arrow attached to it. I am familiar with the border drawing trick and think that's a likely solution, but it only works for known sizes I think, since you have to specify border in em or px. The shape I would like to make is this: . / \ / \ / \ | flex | | | Where the content area can flex to different sizes as a percentage of a parent container. Here is the CSS, with the problem area flagged: .metric { display: inline-block; position: relative

问题 I still see questions here that pertain to making responsive design work for IE8, or god forbid, IE7. For lack of knowledge of Windows related devices, my immediate thought is that, it would not be worth implementing responsive design for IE8 due to the insignificant amount of mobile devices that would still run IE8 today. And just leave sites as static 1024x768 for this particular browser, as there is little to no reason for responsive design, with the extra painful efforts it requires and